带有SVG的CSS：真实世界的使用

热门技术勘探工
504 阅读5分钟

SVG是一种轻量级的矢量图像格式，用于在网络和其他环境中显示各种图形，并支持交互性和动画。在这篇文章中，我们将探讨在SVG中使用CSS的各种方法，以及在网页中包含SVG并对其进行操作的方法。

可扩展矢量图形（SVG）格式自1999年以来一直是一个开放的标准，但在2011年Internet Explorer 9发布后，浏览器的使用开始变得实用。今天，SVG在所有的浏览器中都得到了很好的支持，尽管更多的高级功能会有所不同。

SVG的优势

位图图像格式，如WebP、PNG、JPG和GIF，定义了单个像素的颜色。一个100 ×100 PNG图像需要10,000个像素。每个像素需要4个字节的红、绿、蓝和透明度，因此产生的文件是40,000字节（加上一点元数据）。压缩是为了减少文件的大小。PNG和GIF使用类似ZIP的无损压缩，而JPG是有损压缩，并删除不太明显的细节（WebP可以使用两种方法）。

位图是照片和更复杂的图像的理想选择，但随着图像的放大，定义会丢失。

SVG是用XML定义的矢量图像。点、线、曲线、路径、椭圆、矩形、文本等都在SVG画布上绘制。比如说。

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <circle cx="400" cy="300" r="250" stroke-width="20" stroke="#f00" fill="#ff0" />
</svg>

viewBox ，定义了一个坐标空间。在这个例子中，一个800 ×600 的区域，从位置0,0 开始，有一个黄色的圆，有红色的边框，中间画了一个250 单位半径。

SVG circle

这些是矢量比位图的好处。

  • 上面的SVG使用了不到150个字节，这比同等的PNG或JPG要小得多。
  • SVG的背景默认是透明的
  • 图像可以扩展到任何尺寸而不损失质量
  • SVG代码/元素可以在服务器（使用任何语言）或浏览器（使用CSS和JavaScript）上生成和操作
  • 在可访问性和搜索引擎优化方面，文本和绘图元素是机器和人类可读的。

SVG图像是标志、图表、图标和更简单的图表的理想选择。只有照片一般是不切实际的，尽管SVG已经被用于懒惰加载的占位符。

SVG工具

了解SVG绘图的基础知识是很有用的，但你很快就会想用一个可以生成代码的编辑器来创建更复杂的形状。选项包括

每个工具都有不同的优势，对于看似相同的图像，你会得到不同的结果。一般来说，更复杂的图像需要更复杂的软件。

通常可以使用SVGO（大多数构建工具都有插件）或Jake Archibold的SVGOMG交互式工具来进一步简化和减少产生的代码。

作为静止图像的SVG

当在HTML<img> 标签或CSSbackground-url 中使用时，SVG的作用与位图完全相同。

<!-- HTML image -->
<img src="myimage.svg" alt="a vector graphic" />

/* CSS background */
.myelement {
  background-image: url("mybackground.svg");
}

浏览器将禁用任何嵌入到SVG文件中的脚本、链接和其他互动功能。你可以使用CSS来操作SVG，与使用transform 、filters 等其他图像的方式相同。由于SVG可以无限放大，所以其效果往往优于位图。

CSS内嵌的SVG背景

SVG可以直接在CSS代码中内联作为背景图片。这对于较小的、可重复使用的图标来说是很理想的，并且可以避免额外的HTTP请求。比如说。

.mysvgbackground {
  background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat;
}

可以使用标准的UTF-8文本编码（而不是base64），因此在必要时更容易编辑SVG图像。

这个过程通常使用PostCSS资产插件这样的工具更实用。

带有SVG的CSS：响应式SVG图像

在创建一个响应式网站时，图像的大小通常是根据其容器的宽度或图像本身（以较小者为准）。这是在CSS中使用实现的。

img {
  display: block;
  max-width: 100%;
  height: auto;
}

然而，在<img> 标签中使用的SVG可能没有隐含的尺寸。你可能会发现max-width 被计算为零，而图像则完全消失了。要解决这个问题，请确保在<svg> 标签中定义一个默认的width 和height 。

<svg xmlns="https://www.w3.org/2000/svg" width="400" height="300">

HTML内嵌的SVG图像

SVG可以直接放在HTML标记中。然后，该图像成为DOM的一部分，可以使用CSS和JavaScript进行操作。

<p>SVG is inlined directly into the HTML:</p>

<svg id="invader" xmlns="https://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8">
  <path d="M70.9 35.4v17.8h17.7V35.4H70.9zm17.7 17.8v17.7H70.9v17.7H53.2V53.2H35.4V124h17.8v17.7h17.7v17.7h17.7v-17.7h88.6v17.7h17.7v-17.7h17.7V124h17.7V53.2h-17.7v35.4h-17.7V70.9h-17.7V53.2h-17.8v17.7H106.3V53.2H88.6zm88.6 0h17.7V35.4h-17.7v17.8zm17.7 106.2v17.8h17.7v-17.8h-17.7zm-124 0H53.2v17.8h17.7v-17.8zm17.7-70.8h17.7v17.7H88.6V88.6zm70.8 0h17.8v17.7h-17.8V88.6z"/>
  <path d="M319 35.4v17.8h17.6V35.4H319zm17.6 17.8v17.7H319v17.7h-17.7v17.7h-17.7V159.4h17.7V124h17.7v35.4h17.7v-17.7H425.2v17.7h17.7V124h17.7v35.4h17.7V106.3h-17.7V88.6H443V70.9h-17.7V53.2h-17.7v17.7h-53.2V53.2h-17.7zm88.6 0h17.7V35.4h-17.7v17.8zm0 106.2h-35.5v17.8h35.5v-17.8zm-88.6 0v17.8h35.5v-17.8h-35.5zm0-70.8h17.7v17.7h-17.7V88.6zm70.9 0h17.7v17.7h-17.7V88.6z"/>
</svg>

<p>The SVG is now part of the DOM.</p>

在这种情况下，width 或height 属性是没有必要的，因为可以直接控制尺寸。比如说。

#invader {
  display: block;
  width: 200px;
  height: auto;
}

#invader path {
  stroke-width: 0;
  fill: #080;
}

然而，添加尺寸可以确保在不应用CSS的情况下，SVG的大小不会不合适。

参见CodePen上的Pen
HTML-Inlined SVG by SitePoint (@SitePoint)
。

SVG元素，如路径、圆形、矩形等，可以被CSS选择器锁定，并使用标准的SVG属性作为CSS属性来修改其样式。比如说。

/* CSS styling for all SVG circles */
circle {
  stroke-width: 20;
  stroke: #f00;
  fill: #ff0;
}

这将覆盖SVG中定义的任何属性，因为CSS具有更高的特殊性。SVG的CSS样式设计有几个好处。

  • 基于属性的造型可以完全从SVG中移除，以减少页面的重量
  • CSS样式可以在任意数量的页面上的任意数量的SVG中重复使用
  • 整个SVG或图像中的单个元素都可以使用:hover,transition,animation 等来应用CSS效果。

继续阅读《使用SVG的CSS：真实世界的使用情况》，请点击SitePoint。

avatar
文章
阅读
粉丝