android 使用svg图片当布局背景 svgbackgrounds

转载

小蝌蚪 2024-06-30 22:18:04

文章标签 java python 人工智能 mysql js 文章分类 Android 移动开发

svg背景

A series of serendipitous connections started me thinking about using tiled SVG elements for background images, especially patterns inspired by movies.

一系列偶然的联系使我开始考虑将平铺的SVG元素用于背景图像，尤其是受电影启发的图案。

SVG is uniquely suited for this, being infinitely scalable and (when correctly written) very small and fast to load. This article will introduce the code for the patterns; in the next, I’ll talk about techniques you can use to make your own SVG background images.

SVG特别适合于此，它具有无限的可扩展性，并且(正确书写时)非常小且加载速度快。本文将介绍模式的代码。接下来，我将讨论可用于制作自己的SVG背景图像的技术。

(To Infinity, and Beyond)

The first is the wallpaper pattern from Andy Davis’s room in Toy Story. In this version I’ve kept the shading and code to a minimum:

玩具总动员》中安迪·戴维斯(Andy Davis)房间的墙纸图案。在此版本中，我将阴影和代码降至最低：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 413 254.2">
    <path fill="#FFF" d="M6,239.9c18.7,0,184.7,0.7,204.7,0s13.3-18.7-17.3-19.3c31.3-14.7,28.7-79.3-8.7-64.7 c8.7-79-128.7-76-93.8,24.7c-12.2,0-39.5,15.3-31.5,38.7c-17.3,2.7-30,2.4-42.8,6.2C1.9,229.7,6,239.9,6,239.9z"/>
    <path fill="#FFF" d="M310.7,97.4c0,0,60.1,0.2,80.1,0c20.5-0.2,22.9-10.6,2.9-14.8C418.2,46.8,356,4.1,344.5,59
c-16.8-8.3-30.3,16.6-28.8,26c-6.7-0.5,0-1.3-9.3-0.5C297,85.3,289.4,97.8,310.7,97.4z"/>
</svg>

The SVG consists of two cloud-paths, drawn in Adobe Illustrator; the background has been left clear for maximum adaptability. Saved as andy-clouds.svg, the file can be used like this:

SVG包含两个在Adobe Illustrator中绘制的云路径；为了最大的适应性，背景被清除了。 andy-clouds.svg为andy-clouds.svg ，该文件可以这样使用：

body {
	background-image: url(andy-cloud.svg), linear-gradient(#00f,#33f);
    background-repeat: repeat, no-repeat;
    background-size: 200px 100px, cover;
}

android 使用svg图片当布局背景 svgbackgrounds_人工智能

Fig. 1: Vector tile for Overlook pattern 图1：用于忽略模式的矢量图块

Note that background-size determines the tiling of the cloud patterns, and that it roughly matches the aspect ratio of the SVG viewport.

请注意， background-size决定了云图案的平铺方式，并且它与SVG视口的纵横比大致匹配。

(All Work and No Play)

The next version is a little more complex, as it’s a continuous pattern from edge to edge that must tile seamlessly across the element it is applied to. In Illustrator, the drawing appears like the image in Figure 1; again, the background has been left clear and the code minimized as much as possible:

下一个版本稍微复杂一点，因为它是一个从一端到另一端的连续模式，必须在其所应用的元素上无缝平铺。在Illustrator中，绘图的外观类似于图1中的图像。同样，背景保持清晰，并尽可能减少代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340.6 491.8">
    <polygon fill="#8C1A1E" points="229.9,208.7 170.5,243 111,208.7 111,140 170.5,105.7 229.9,140 "/>
    <polygon fill="#8C1A1E" points="0,305.3 59.5,339.6 59.5,408.3 0,442.6 "/>
    <polygon fill="#8C1A1E" points="342.8,442.6 283.3,408.3 283.3,339.6 342.8,305.3 "/>
    <polygon fill="#D05427" points="91.6,0 0,52.9 0,0 "/>
    <polygon fill="#D05427" points="340.6,0 340.6,52.9 248.8,0 "/>
    <polygon fill="#D05427" points="21.4,264.6 102.8,311.6 102.8,431.7 -1.2,491.8 0,544.5 149.7,458.1 149.1,285.1 68.2,236.7 
68.2,116.6 172.2,56.5 276.2,116.6 276.2,236.7 192.5,285 192.5,337.1 192.5,337.1 192.5,458.1 342.2,544.5 341,491.8 237,431.7 237,311.6 320.8,263.3 320.8,90.2 171.1,3.8 21.4,90.2 "/>
</svg>

Applying the pattern is also slightly more complex: the background-size of the applied image must match the aspect ratio of the SVG viewport exactly to create a seamless tile.

应用图案也稍微复杂一点：所应用图像的background-size必须与SVG视口的长宽比完全匹配才能创建无缝图块。

body {
    background-color: #000;
    background-image: url(overlook-carpet.svg);
    background-size: 169px 244px;
}

android 使用svg图片当布局背景 svgbackgrounds_java_02

Did you know these two patterns are related? The Overlook carpet appears on the floor of Sid Phillip’s house in Toy Story.

玩具总动员》中席德·菲利普(Sid Phillip)房屋的地板上。

While the SVG file is tiny (just 844 bytes before GZipping), what kills page loading time in many cases is not file size, but latency: the time taken to establish a new connection in order to download another file. To avoid that extra HTTP request, the SVG could be base-64 encoded or inlined. If inlined, the code would look like this:

尽管SVG文件很小(在GZipping之前只有844个字节)，但在许多情况下，杀死页面加载时间的不是文件大小，而是等待时间：建立新连接以下载另一个文件所花费的时间。为了避免额外的HTTP请求，SVG可以使用base-64编码或内联。如果内联，则代码如下所示：

body {
    background-color: #000;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340.6 491.8"><polygon fill="#8C1A1E" points="229.9,208.7 170.5,243 111,208.7 111,140 170.5,105.7 229.9,140 "/> ... </svg>');
    background-size: 169px 244px;
}

Of course, that has the downside of increasing the size of the CSS file; ultimately, the best course of action will depend on several factors, including just how the SVG background will be used.

当然，这样做有增加CSS文件大小的缺点。最终，最佳的行动方案将取决于几个因素，包括SVG背景的使用方式。

It’s also useful to note that changing the background-size of the image will change the tiling, sometimes in dramatic ways; for example, using background-size: 400px 244px will produce a result that looks like Figure 2:

还需要注意的是，更改图像的background-size会改变拼贴，有时会以戏剧性的方式进行。例如，使用background-size: 400px 244px将产生如图2所示的结果：

android 使用svg图片当布局背景 svgbackgrounds_python_03

Figure 2: Different background effects from adjusted size

图2：调整后的大小会产生不同的背景效果

There’s much more that can be done here, including the possibilities of animating the background images. In the meantime, I’d like to ask: what iconic textures from movies would you like to see as SVG backgrounds? Please leave your suggestions in the comments section below!

在这里可以做更多的事情，包括对背景图像进行动画处理的可能性。同时，我想问：您想从电影中看到什么标志性的纹理作为SVG背景？请在下面的评论部分中留下您的建议！

Veerle Pieters has an excellent tutorial on making the Overlook Hotel carpet pattern using Illustrator.

Veerle Pieters有一个出色的教程，介绍如何使用Illustrator制作Overlook Hotel地毯图案。