这篇文章是一个名为Web和界面设计与矢量系列的一部分。

创建一组光面标签并将其保存为Web

快速提示：如何使用外观面板创建一个简单的Web按钮设置

可缩放矢量图形（SVG）是1998年开始生活的一种矢量图像格式。它始终是以网络为基础开发的，但现在才真正开始追赶网络。今天不能否认它的相关性，所以我们来看看从Illustrator到Web浏览器的基础知识。

注意：我使用Adobe Illustrator CC来演示这里的东西，但是其他版本也有类似的（如果不是相同的）选项和工具。

为什么SVG有用？

SVG格式是由万维网联盟（W3C）开发并继续维护的。W3C由一群聪明的民间人士组成，他们致力于将网络标准化，使其成为每个人都可以使用的开放的地方。

SVG对于网络来说是好事，特别是现在，它绕过了屏幕分辨率的问题。无论您的新智能手机像素的密集程度如何，矢量将始终显示为像新鲜下降的雪一样清晰，而光栅化图像并非总是如此。

文件大小始终是Web的问题（没有人希望通过移动连接等待5Tb图像加载到浏览器中），所以SVG是一种简化的矢量格式。它是用XML构建的，并且删除了大量不必要的“东西”，从而得到相对较轻的文件。

最后，考虑到这些XML构建块，SVG文件的内容可以像网页上的任何其他元素一样进行操作和设置。SVG中的部分可以被隔离，颜色可以改变，笔画重量可以改变，透明度，我们甚至可以应用某些过滤器（如模糊），甚至动画- 所有通过CSS和JavaScript。

我什么时候会使用SVG？

清晰的线条质量和能够操纵图形元素的优点是不言自明的，但是哪里可以利用这一点呢？下面是SVG进入其中的一个快速列表：

每天图形：如果您在网站上使用图形，请考虑它是否可以作为SVG格式。如果是这样，为什么不使用它？摄影将是一个SVG没有意义的例子，但对于其他所有的东西，请仔细考虑一下。

展示清脆的字体样本。为什么还要使用模糊的光栅格式呢？

图标：世界各地的网站都挂着图标;他们被普遍理解（正确使用时），并缩短用户处理界面所需的时间。这些日子的图标经常通过网页字体应用到网站，但也可以作为SVG注入页面。为每个人完美清洁和清爽的图标，可爱。

我还没有完成这套SVG图标，

标志：如果公司应该珍惜一件事，那就是它的身份。SVG提供了在网络上显示品牌的最佳方式，简单明了。颜色可以是精确的，线条质量是完美无暇的，同一个文件可以在一个网站上重复使用，但根据具体情况而改变。完善。

认识这个标志？

装饰：我不需要把这个想法卖给矢量艺术家，是吗？

SVG装饰礼貌fixate.it

动画：通过CSS3和JavaScript，整个动画世界已经向网络开放。由于我列出的所有原因，SVG也是完美的车辆。你能想象一下当你翻转它们的时候哪个按钮有动画吗？给你直接个性化反馈的图标？天空真的是极限。

标志性的展示SVG反馈

所以这就是SVG。矢量格式，在网络中开发。让我们看看我们如何使用它。

将文件保存为SVG

我们将使用一个非常基本的图像来展示SVG的功能。

新文件

打开Illustrator，开始一个新的文档（文件>新建文档），如果你愿意，给它一个名字，并设置在300×300px的画板。

选择一个图像

在这一点上，你用作演示向量的东西几乎没什么区别，但是去做一些相对简单的事情。我使用了“No Pirates Allowed”字形，可以用“Webdings”字体免费获得（我从来没有想过我会用这个字体）

进入字形面板（Type> Glyphs），然后选择“Webdings”字体来浏览各种可用的字符。

随着文字工具选择，单击画板，然后双击您选择的字形来使用它。

转换为轮廓

我们现在要把这个字型转换成轮廓。

注意：SVG实际上支持文本对象，但为了在基本层面上展示事物，我们将选择路径。

使用选择工具（V）选择字形：

然后去Type> Create Outlines。

超！我们现在有一个基于路径的矢量对象。

保存

要将这个文档保存为SVG，请转到文件>保存或文件>另存为。在弹出的对话框中，选择一个位置，给它一个文件名（如果还没有的话），最重要的是选择SVG作为格式：

然后您会看到另一个对话框，这次有一些SVG选项。

事实上，在这一点上忽略这些选项将会很好地为您服务。在正常情况下，默认值都是你想要的。

稍后我们将介绍其中的一些选项，但现在，请点击“确定”。

我们有一个SVG文件！

那么，那些SVG选项

我们跳过了SVG选项，因为你并不需要太多的关注。不过，为了彻底，让我们来看看。

SVG与SVGZ

首先，我们可以在保存对话框中选择两种潜在的SVG格式。

SVGZ是一个严重压缩（压缩，我想）版本的SVG。它提供了一个较小的文件大小，但是将文件内部的XML转化为乱码，使我们无法通过CSS和JavaScript来操纵矢量。

SVG配置文件

网络不断变化的形势以及网络标准的不断发展，意味着SVG一直在不断发展。您可以在保存SVG文件时看到第一个选项：SVG配置文件。配置文件选择目前看起来像这样：

他们的意思是（或多或少）如下：

SVG 1.0：SVG的第一个（2001）化身

SVG 1.1：与SVG 1.0几乎相同，不同之处在于SVG 1.1可以分成更多的子类型，

SVG Tiny 1.1：这是SVG 1.1的第一个子类型，针对移动web进行了优化。这是一个非常简单的SVG形式，专为“高度受限的移动设备”而设计。微小不支持渐变，透明度，剪裁，蒙版，符号，图案，下划线文本，穿透文本，垂直文本或SVG滤镜效果。

SVG Tiny 1.1+：SVG Tony 1.1的轻微发展，增加了对渐变和透明度的支持。

SVG Basic 1.1：这是SVG 1.1的第二个子类型，允许功能更强大的移动设备，如智能手机。基本不支持非矩形剪裁和一些SVG滤镜效果。

SVG Tiny 1.2：这最初是为了SVG的下一个完整的规范，但最终成为了Tiny子类型的开发。不要问我到底是什么区别。

很快，我们就可以将SVG 2.0添加到这个列表中。实际上，这些配置文件的细微差别在很大程度上与我们无关。SVG能够处理各种各样的东西，但是对于简单的矢量来说，坚持使用SVG 1.1的当前默认设置，并且只要有可能，网页上的图形就会很好。

字体

SVG文件可以包含的不仅仅是矢量路径。文本对象就是这样的一个例子，字体选项允许你决定如何处理文本对象。

Adobe CEF：这使用字体提示显示更精炼的印刷术。但是，所有SVG查看器都不支持。

SVG：所有SVG观众都认可的最大支持，但缺乏Adobe CEF的细化。

转换为大纲：删除所有的编辑功能，但保留文本的方式完全相同，无论在哪里查看。导致一个稍大的文件，因为路径需要被描述，而不是只说明哪些字符存在。

部分字体选项涉及子集。只有当您选择不将文本转换为轮廓时，这才是相关的。

子集将字符细节嵌入到SVG文件中，允许文件显示用户系统中可能不存在的字体。嵌入整个字体（显然）会导致更重的文件，但您可以选择包含多少个字形。

选项

虽然我们在嵌入的主题，这里最后剩下的选项也可以影响文件大小。

与使用字体的方式大致相同，SVG文件可以保存位图图像。你在哪里看到图像位置选择“嵌入”，使图像包含在代码形式的文件中，或选择“链接”，以简单地引用图像。这与在Illustrator中放置图像的方式大致相同，并且极大地影响了最终文件的大小。

最后一个复选框允许您在需要时保留Illustrator编辑功能。这意味着将保留所有图层，过滤器和效果，符号等的细节。同样，如果你的SVG已准备好生产，并且文件大小很重要，请不要选中此项。

注意：建议您保留一个可用的.AI文件进行编辑。

几个按钮

最后，选项对话框底部的三个按钮将执行以下操作：

更多的选择：现在让我们离开这些，我们？

SVG代码..：直接在文本编辑器中启动包含在SVG文件中的XML代码。

Globe：直接在Web浏览器中启动SVG文件。只是这样你可以检查。

在Web上使用SVG

如果您不习惯直接使用网络，HTML，浏览器等等，那么在这一点上有几件事情需要考虑。

网页浏览器

首先，让我们证明你的浏览器可以很好地处理这种格式。右键单击您的新的有光泽的SVG文件，并选择使用标准Web浏览器打开它：

较老的浏览器，如Internet Explorer 8和更早的版本，不支持SVG格式，并且可悲的是不会播放。

有关SVG和浏览器支持的更多详细信息，请访问caniuse.com。

但只要您使用的是现代浏览器，SVG文件将会打开并显示，不会有任何问题。

首先要注意的是，SVG文件保留了我们原来给它的尺寸。我们的SVG已经打开了300 x 300px，Artboard已经规定了外部界限，而且盗版图标应该放置在中心位置。

广告

在Web页面中嵌入SVG

到目前为止，我们已经创建了一个SVG文件，我们已经在浏览器中打开它来检查它的工作。现在是在网页中正确使用我们的文件的时候了。

首先，我们需要一个网页。这不需要比空文件更复杂，.html文件扩展名可以在普通的文本编辑器中保存。我们不需要担心在这个文件中有任何代码，但是如果你对HTML的基础知识感兴趣的话，可以看看在某些时候学习HTML的最佳途径。

这是我的文件，在Mac OS X的TextEdit中打开，但是您可以使用任何文本或代码编辑器。

这个文件将在Web浏览器中打开，但是我们需要添加一些HTML“标记”代码来嵌入SVG。有几种方法可以做到这一点。

该

标签法

need-to-insert-img

首先，我们可以使用图像标签（您可能会习惯使用JPG，PNG文件等）指向src=""属性中的确切文件路径。将这段代码粘贴到您的HTML文件中：

1

假设文件路径是正确的，你的HTML页面将在浏览器中打开，就像这样：

是的，我知道现阶段的普遍效果与我们直接在网页浏览器中打开SVG的效果是一样的，但现在我们拥有更多的力量！例如，我们可以通过使用width=""属性立即使SVG变大：

1

一个美丽，清脆的SVG，无限扩展！

这种方法可能是最简单的，但确实存在问题。一些浏览器，出于安全的原因，将限制你能够做的SVG（例如JavaScript）。让我们看看替代品。

该标签法

使用标签是相似的，但你指向这样的文件路径：

1

结果是完全一样的：

对于不支持SVG的浏览器，如果SVG不能显示，甚至可以在SVG内容中放置警告：

1This browser sucks

许多网页设计师认为这种方法是目前在网页中使用SVG最可靠和最灵活的方式。

内联方法

我们已经谈到了SVG的XML起源，如果你用你的文本编辑器打开SVG文件，你会看到类似这样的东西：

哇，多废话！事实上，一旦你完成了最初的冲击，你应该能够看到其中的某种意义。我们可以利用这个XML代码嵌入，粘贴内容直接到我们的HTML文件。

当你对SVG XML结构更加熟悉的时候，你将能够修剪出文件中的位，这些都有助于文件的大小。

如果您喜欢，请随意删除该行，

您真正需要的只是一个简化的版本，只包含几个XML标签：

CSS背景方法

使用CSS（与HTML结合使用的样式语法），我们也可以指定我们的SVG文件作为网页元素的背景图像。

现在我们正在推进本教程的界限，但是如果您有兴趣学习CSS的基础知识，

我们可以使用一个单独的CSS文件，从我们的HTML文档链接到它，或者我们可以

1html {background-image:url(SVG-Test.svg); }

这个样式规则指出我们的SVG文件应该显示为我们HTML元素的背景。

总结

那关于包装的基础！在本教程中，我们介绍了SVG的创建，以及Web上基本的SVG使用。

如果你一直想知道SVG是什么，但从来不知道为什么你要使用它，我希望这个教程已经打开你的眼睛。这种格式的潜力是巨大的，并且由于网络和图形行业人们的想象力和技术魔力而一直在增长。

这期分享到这里了，学习更多干货的朋友可关注UI设计威信公共账号：liangyuansi1每天更新最实用技巧技能教程。欢迎加入社群605464266，一起进步。