前端扩展之如何制作 SVG 文件

AirStar
630 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

如何制作 SVG 文件

如何使用图像编辑程序制作 SVG

你可以使用 Adob​​e Illustrator、CorelDraw、Adobe Photoshop、Microsoft Visio 和 GIMP 等图像编辑软件制作 SVG 文件。

有了这些程序，当涉及到你可以绘制的 SVG 时，你的创造力就是你的极限。

这取决于你对这些程序的知识和经验。

此外，如果你使用 Google Docs 创建插图和绘图，你可以将它们导出为 SVG。

如何使用 XML 制作 SVG

如果你不知道如何使用上面列出的图像编辑程序但你可以编写代码，则可以使用 XML 编写 SVG。

要编写 SVG 代码，请创建一个.svg扩展名为的文件：
ss1

第 1 步：定义 SVG 开始和结束标签

<svg>
    <!--  -->
</svg>

第 2 步：定义xmlns开始标签内的版本和属性，并分别设置为1.1和"http://www.w3.org/2000/svg"。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    
</svg>

第 3 步：在自闭合标签中指定要绘制的形状。例如，<rect>对于矩形。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect />
</svg>

第 4 步：指定所需的宽度和高度：

 width="200" height="100"

第 5 步：定义要使用fill属性填充形状的颜色：

fill="#2ecc71"

代码现在如下面的代码片段所示：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="200" height="100" fill="#2ecc71" />
</svg>

最后，这就是浏览器中显示的内容：
SS2

你还可以使用and属性在xandy轴上定义边界半径：rx``ry

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="200" height="100" fill="#2ecc71" rx="4" ry="4" />
</svg>

ss3

绘制 SVG 后，你可以将其用作src图像源 ( ) 的值：

<img src="svgdraw.svg" alt="A rectangle made with SVG" />

如果需要，可以将 SVG 直接嵌入到 HTML 代码中：

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <rect width="200" height="100" fill="#2ecc71" />
    </svg>
</body>

SVG 文件有什么用途？

因为 SVG 文件终生不变，所以网站图标和徽标通常是用它们制作的。

SVG 的一大优势是其中的文本可以被 Google 等搜索引擎读取，因此 SVG 文件用于制作信息图表和插图。

如何打开 SVG 文件

Google Chrome、Edge、Safari 和 Firefox 等现代浏览器具有内置功能，可让它们为你打开 SVG 文件。

你还可以在可用于制作它们的专用编辑软件中打开 SVG 文件。同样，示例是 Adob​​e Illustrator、CorelDraw、Adobe Photoshop、Microsoft Visio 和 GIMP。

如果要编辑 SVG 文件，可以使用 VS Code、Atom 和 Sublime Text 等代码编辑器打开它们，然后进行编辑。

如何将 SVG 文件转换为图像？

如果要将 SVG 转换为其他图像格式，如 PNG 和 JPG，可以使用 Adob​​e Photoshop 等图像编辑程序。

你还可以使用名为Convertio的在线工具。

你需要做的就是上传你的 SVG，然后选择你想要将其转换为的格式。
ss4

结论

感谢你的阅读！

avatar
文章
阅读
粉丝