前端必知必会 | 学SVG看这篇就够了（一）

_island
11,258 阅读2分钟

什么是SVG

SVG诞生于1999年，是一种XML语言，类似XHTML，即SVG，可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变、合成、或者通过滤镜完全改变外观。

为什么学SVG？它有什么优势？

比起其他的图像格式（例如jpg，gif），SVG的优点是：

  1. 可以使用任何文本编辑器来创建绘画SVG。
  2. 可以搜索、索引、脚本化、压缩SVG图像。
  3. SVG图像可以扩展，可以在任何分辨率上高质量显示。
  4. SVG图像支持缩放，且不会失去任何质量。
  5. SVG是开放标准，是纯XML文件。
绘画一个简单的SVG
<svg width="300" height="200">
    <rect width="100%" height="100%" fill="blue" />
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

1.png

  • 以上绘制一个SVG基本流程
    • 绘制一个svg根标签
    • 绘制一个rect标签，它是一个绘制矩形的标签，宽高设置100%也就是把父级元素占满，fill属性为设置背景颜色
    • 绘制一个circle标签，它是一个绘制圆形的标签，cx和cy是偏移的属性（默认是0，即圆心在坐标0，0中绘画），r是半径大小
渲染规则
  • svg里的元素渲染顺序、规则是后来居上，越后面渲染的元素越前。
嵌套到HTML文件中的几种方式

  • XHTML需要将类型声明为application/xhtml+xml，才能将SVG嵌入到XML中。

  • HTML5可以直接嵌入SVG。但需要做一些语法调整。

    • 可以通过 object 元素引用SVG文件：

    • <object data="image.svg" type="image/svg+xml" />

    • 类似的也可以使用 iframe 元素引用SVG文件：

    • <iframe src="image.svg"></iframe>

    • 使用img标签引用SVG文件：

    • <img src="image.svg" style="display:block;width:200px;height:200px" />

    • 使用embed标签：

    • <embed src="image.svg" style="display:block;width:200px;height:200px" />

    • 使用div标签：

    • <div style="display:block;width:200px;height:200px;background: url(./image.svg) no-repeat;background-size: 100%;" ></div>

    • 使用picture标签：

    • <picture>
    <source srcset="image.svg"  type="image/svg+xml">
    <img src="image.svg" style="display:block;width:200px;height:200px">
</picture>

svg文件类型

  • svg文件分为两种形式
    • 普通SVG文件：包含SVG标准的文本文件，后缀名通常为.svg。
    • 压缩版SVG文件：某种场景下的SVG文件可能很大，SVG标准是允许gzip压缩的，后缀名通常为.svgz（注意的是在FireFox不能再本地上加载svgz文件，除非知道处理发布内容的web服务器可以正确的处理gzip，否则要避免使用gzip压缩的SVG）。

最后

本篇文章讲述的最简单的SVG的使用及多种在HTML中嵌入SVG的方式等内容,下一篇将继续讲述SVG的网格定位,图像绘画等新内容。

😀😀 关注我，不迷路！  😀😀

avatar
文章
阅读
粉丝