<![CDATA[ SVG - freeCodeCamp.org ]]> https://www.freecodecamp.org/chinese/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ SVG - freeCodeCamp.org ]]> https://www.freecodecamp.org/chinese/news/ Eleventy Mon, 11 May 2026 04:22:29 +0000 60 <![CDATA[ 如何制作 SVG 文件 ]]> https://www.freecodecamp.org/chinese/news/what-is-an-svg-file/ 62a2b9f4dbb8cc083a1281f2 Tue, 12 Jul 2022 03:30:00 +0000 原文：What is an SVG File，作者：Kolade Chris

SVG 意思是可缩放矢量图形。它是一种 web 友好的基于矢量的文件格式，用于在 Internet 上呈现二维图像。

你可以通过扩展名 .svg 来识别 SVG 文件。

与其他流行的图像格式（如 PNG、JPEG 和 JPG）不同——它们以像素的形式存储图像信息，因为它们是基于光栅的格式——SVG 将图形信息存储为一组点和线。

这意味着无论 SVG 文件如何重新加工、缩放或调整大小，它们都不会像 PNG、JPG 和其他光栅图像那样变得模糊和像素化。

本文将向你展示 SVG 图像文件的可能性，以及如何通过编码为自己制作一个 SVG。

文章目录

如何制作 SVG 文件

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

你可以使用 Adobe 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

你还可以使用 rx 和 ry 属性在 x 和 y 轴上定义边界半径：

<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 文件。例如 Adobe Illustrator、CorelDraw、Adobe Photoshop、Microsoft Visio 和 GIMP。

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

如何将 SVG 文件转换为图像

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

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

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

小结

你应该使用 SVG 的原因有很多。

所有这些原因中我最喜欢的是搜索引擎可以读取 SVG 文件上的文本。这是因为 SVG 文件是用纯 XML（用于传输数字数据的标记语言）编写的。

如果 Google 和其他搜索引擎在 SVG 文件中找到相关关键字，则可以极大地促进 SEO （搜索引擎优化）。

感谢你阅读本文。

]]> <![CDATA[ 如何在 HTML 和 CSS 中使用 SVG 图像 ]]> https://www.freecodecamp.org/chinese/news/use-svg-images-in-css-html/ 62296bb1cda7d006365a758a Thu, 10 Mar 2022 03:12:58 +0000 原文：How to Use SVG Images in CSS and HTML – A Tutorial for Beginners，作者：Edidiong Asikpo

SVG指可缩放矢量图形，是一种可以使用可扩展标记语言（XML）进行编写的矢量图形。

本教程将解释为什么需要使用SVG图像，以及如何在CSS和HTML中使用它们。

为什么需要使用SVG图像

使用SVG图像的原因有很多，其中一些原因如下所示：

  • SVG图像在放大或缩小的时候不会失真。

  • SVG图像可以使用IDE和文本编辑器进行创建和编辑。

  • SVG图像支持动画和交互。

  • SVG图像文件小并且具有高扩展性。

  • SVG图像可以被搜索、索引、脚本化以及压缩。

现在来看如何使用SVG图像。

如何下载本教程中使用的SVG图像

如果你想使用本教程中的SVG图像，可以通过以下步骤下载。

  • 访问 unDraw。

  • 将背景色改为黄色。

  • 在搜索框中搜索关键词happy。

unDraw's Homepage

  • 点击图像名称 Happy news。

  • 在弹出框中，点击 Download SVG to your projects 按钮。

Download the SVG file

如果你正确执行了以上步骤，本教程中的SVG图像应该已经在你的电脑中了。

3uCGy6B

现在，使用你喜爱的IDE或者文本编辑器打开这个SVG图像，并将它重命名为happy.svg或者任何你喜欢的名字。

如何在CSS和HTML中使用SVG图像

在CSS和HTML中使用SVG图像有许多不同的方式。接下来，本教程将介绍其中6种方式。

1. 如何利用<img>元素使用SVG图像

利用<img>元素将SVG图像添加到网页中是最简单的方式。使用这种方法，需要在HTML文档中添加一个<img>元素，并且在该元素的src属性中指定该SVG图像的引用，代码如下所示：

<img src = "happy.svg" alt="My Happy SVG"/>

如果你已经从unDraw网站上下载了SVG图像并将它重命名为happy.svg，你可以继续向下进行并将上面的代码片段添加到你的HTML文档中。

如果每一步都操作正确，你的页面应该同下面demo中所示内容类似。👀

当使用<img>标签添加SVG图像时没有指定大小，浏览器将默认显示原始SVG图像的大小。

例如，上面的demo中，没有修改SVG图像的大小，所以它保持了原始的大小（宽为600.53015px，高为915.11162px）。

注意: 为了改变原始大小，你需要像以下demo中一样使用CSS指定img的width和height，也可以直接更改原始图像的宽和高。

虽然可以通过<img>标签来改变SVG图像的大小，但是在对SVG图像的主要样式进行修改时，这种方式仍有一些限制。

2. 如何在CSS的 background-image属性中使用SVG图像

这种方式类似于使用<img>标签将SVG图像添加到HTML文档的方式，但是这种方法使用CSS操作代替了对HTML的操作，具体方式如下所示。

body {
  background-image: url(happy.svg);
}

使用SVG图像作为CSS背景图像与使用<img>标签的方式具有类似的限制。不过，这种方式支持更多自定义操作。

可以查看下面的demo并随意使用CSS对其进行修改。

3. 如何使用内联SVG图像

使用<svg> </svg>标签可以将SVG图像直接写入HTML文档中。

为了实现这种方式，需要使用VS code或者其他IDE打开SVG图像文件并复制其中的代码，然后将其粘贴到你的HTML文档中的<body>元素中，如下所示。

<body>
 // Paste the SVG code here.
</body>

如果每一步操作都正确，你的页面应该同下面demo中所示内容类似。

在HTML文档中内联使用SVG图像的方式可以减少加载时间，因为只需要进行一次HTTP请求。

并且这种方式相较于使用<img> 或 background-image这两种方式具有更高的自定义性。

4. 如何利用<object>元素使用SVG图像

还可以使用HTML中的<object>标签来将SVG图像添加到网页中，具体方式如以下代码所示：

<object data="happy.svg" width="300" height="300"> </object>

使用data属性指定<object>所展示资源的URL，在本例中就是指SVG图像。

然后，使用width 和 height两个属性指定SVG图像的大小。

同样，如果一切正常，你的网页现在应该长这个样子。😃

所有支持SVG的浏览器都支持使用 <object>。

5. 如何利用<iframe>元素使用SVG图像

虽然不建议使用这种方式，但是你的确能够使用<iframe>标签来添加一个SVG图像，正如下例所示。

但是要记住，<iframe>元素难以维护而且将不利于你的网站进行SEO优化。

而且，使用<iframe>元素也影响了可缩放矢量图形的可缩放性，因为使用这种方式添加的SVG图像不可以缩放。

6. 如何利用<embed>元素使用SVG图像

利用<embed>元素是在HTML和CSS中使用SVG图像的另一种方式，其用法为<embed src="happy.svg" />。

然后，需要注意的是，这种方式也有其局限性。根据MDN的解释，大多数现代浏览器已经废弃和移除了对浏览器插件的支持。这意味着如果想要支持所有用户的浏览器，使用<embed>方式是不明智的。

下面是一个使用利用<embed>元素使用SVG图像的例子。

总结

希望本文可以让你了解在CSS和HTML中使用SVG图像的不同方式，并引导你选择一种合适的方式将SVG图像添加到网站中。

如果你有任何疑问，可以通过Twitter给我发送信息，我很乐意回复每一个问题。

]]>