前端技术之SVG图片（图标）创建

Posted 2022-04-04 海里的鱼2022

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端技术之SVG图片（图标）创建相关的知识，希望对你有一定的参考价值。

0.SVG预备知识

SVG是什么

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义WEB上使用的矢量图
SVG 使用 XML 格式定义图形
SVG 图像在缩放时其图形质量不会有所损失
SVG 是W3C推荐的
SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体

SVG的优势

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可缩放的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 是开放的标准
SVG 文件是纯粹的 XML

1. SVG基本形状

svg有一些预定义的形状元素

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

<!DOCTYPE html>
<html>
   <body>


<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

    <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
    <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"  stroke="orange" fill="transparent" stroke-width="5"/>

    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"  stroke="green" fill="transparent" stroke-width="5"/>

    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>


</body>
</html>

呈现效果：