把你的svg从HTML中提取出来

爱码农 06-24 289

前言：

目前同学们对“html图片填充”大致比较看重，咱们都想要分析一些“html图片填充”的相关知识。那么小编在网上汇集了一些关于“html图片填充””的相关内容，希望朋友们能喜欢，朋友们快快来了解一下吧！

想要整理你的页面重量，但是要保持所有的酷功能吗?继续阅读，看看一个开发人员如何摆脱SVG，并在它的位置使用CSS。

获得高级管理人员手册的重要趋势、技巧和战略，以竞争和赢得数字经济。

在这个假期过后，我们中的许多人都想减掉一点体重，那就是体重。在我的应用中，我广泛地使用SVG元素作为图像、徽标和图标。直到最近，我都直接在HTML中呈现SVG元素。这是最简单的方法。正如您可能通过我的intro语句所猜测的那样，我一直在通过从HTML中删除SVG元素来减少页面权重。它的效果如何?在进行更改之前，主页是14kb (77kb解压缩)。更改后，主页为6kb(未压缩的30kb)。这是每一页的“超过有线”字节的57%。我到底做了什么，我做了哪些权衡来获得一个更小的页面?让我们看看以前如何使用SVG。

这是原始的SVG:

<?xml version="1.0" encoding="UTF-8"?>

</svg>

我将它定义为一个Rails“helper”，它将直接呈现在HTML中。这个元素在页面上重复了很多次，每次我们必须发送完全相同的SVG字符串，该字符串将相同的字节数添加到页面大小。为了解决这个问题，我将SVG代码移动到我的图像目录中，然后我使用链轮来“内联”图像通过一个数据url。

数据URL如何工作?通常，在CSS元素背景下的URL会说“出去，在不同的URL中获取该资产”。相反，一个“数据”URL会编码呈现图像所需的所有数据，而无需创建新的网络请求。这里有一个例子:

background: url("data:image/svg+xml;charset=utf-8,

%3Csvg

version='1.1'

xmlns=''

xmlns:xlink=''

width='512'

height='512'

viewBox='0 0 512 512'

%3E%3Cpath d='M224 387.814v124.186l-192-192 192-192v126.912c223.375 5.24 213.794-151.896 156.931-254.912 140.355 151.707 110.55 394.785-156.931 387.814z'

%3E%3C/path%3E

%3C/svg%3E");

这个“url”包含整个图像内容，不需要发出HTTP请求。

在链轮中，当前支持的数据URL通过创建一个Base64字符串来支持，但是在以后的版本中，它将是URL转义，以避免使用Base64的额外开销。您可以阅读更多关于为什么不使用base64 SVG的内联图像。

以前，我说过我用链轮来做这个改变。在我的项目中，这是sassrails添加警告的咒语。svg作为我的CSS的数据url:

.warning-svg {

width: 16px;

height: 16px;

display: inline-block;

background: asset-data-url("warning.svg");

}

资产数据url被解释为一个指令，它接受警告的内容。svg图像和“inlines”它们使得不需要额外的HTTP请求。如果你用的是ERB，它可能是这样的:

.warning-svg {

width: 16px;

height: 16px;

display: inline-block;

background: url(<%= asset_data_uri 'warning.svg' %>);

}

现在，当您访问该页面时，SVG元素仅通过应用程序发送一次。css，然后被重新使用很多次，通过war- svg类。这意味着为最终用户下载HTML所需的时间更少，而且由于这些资产是与未来的高速缓存头一起服务的，所以它们只会被浏览器下载一次。更好的是，该站点正在Cloudflare CDN的后面服务，因此对于稍微大一点的CSS文件，应用服务器上没有额外的负担。

您可以看到我实现此更改的pull请求。

有什么缺点吗?这种方法(对我来说)最大的问题是，我失去了通过CSS控制SVG元素填充(颜色)的能力。以前在HTML中使用SVG，如果我想改变元素的颜色，很简单，我在CSS中做了。这里有一个例子，可以用CSS将填充色改为红色。

一旦我将SVG元素移出页面，我就无法通过纯CSS进行这种类型的修改。对于这种情况，我决定转换元素，使悬浮状态变得明显:

如果颜色变化是绝对需要的，那么我可以生成两个具有不同填充值的SVG元素，并更改鼠标悬空的背景元素。您可以在其他选项上看到一个堆栈溢出线程。

除了在主页上使用“警告”SVG之外，我还在“repo show”页面上使用它，但是它的填充不同。它是灰色的而不是白色的。在这种情况下，去掉颜色变化是不合适的;但是，我可以使用不透明的CSS属性来近似一个颜色的变化，这将影响SVG元素。

如果您不想在CSS中使用数据URL，您也可以通过标记将其呈现为普通图像。您还可以使用使用标记，它允许您通过HTML发送元素，但之后再使用和操作，就好像它是直接在HTML中一样。

在我的例子中，所有呈现的元素都存在于我的绝大多数页面中，所以将它们放在那些会被浏览器和我的CDN缓存的地方是有意义的。

一些关于将SVG元素转换为内联CSS元素的说明:

您需要确保将高度和宽度设置为元素，因为SVG只是“背景”。

您还需要确保SVG正在被格式化并正确地服务。对我来说，我有一个SVG元素，它缺少xml声明:

<?xml version="1.0" encoding="UTF-8"?>

和相同的一个失踪了xmlns = " "属性。如果您在浏览器中通过CSS检查器单击图像URL，它应该显示是否存在错误。您还需要显式地在图像中设置填充属性，否则，它们将默认为黑色。