深圳网页设计：可伸缩矢量图形（SVG）入门

作为深圳网页设计师，您应该知道如何在网站中实施SVG（可缩放矢量图形）。现在让我们来看看SVG的基础知识，以及更复杂的设计，如徽标或图标。

我们将要创造什么

分辨率独立

最近在WWDC 2012上， Apple宣布发布新的视网膜显示器MacBook Pro。Retina显示器具有比普通屏幕或显示器更高的像素密度（220.5ppi），并且Apple声称他们的视网膜技术像素密度非常高，以至于眼睛在典型的观看距离处无法注意到像素化。如果你亲眼目睹了视网膜显示，那么我相信你会同意他们看起来很棒。然而，这些视网膜显示器可能开始给我们的网页设计师带来问题。

以前保存为72ppi的图像现在开始在视网膜显示器上看起来扭曲时出现问题。这个问题的解决方案仍未100％解决，设计人员正在寻找尝试解决此问题的新方法。

一种可能的解决方案（在某些情况下）是使用SVG。你为什么要使用SVG？SVG被渲染为矢量，因此可以扩展到我们正在查看它们的任何屏幕分辨率，同时保持我们在设计它们时所预期的清晰度和晶体质量。

这不会解决所有问题; 我们无法使用SVG渲染基于像素的图像，例如.jpg或png（但是，为此我们总是可以使用canvas标记）。当涉及到插图图标或徽标之类的东西时，SVG证明非常有用。今天，我将向您展示使用SVG的基础知识，以及演示如何使用您在Adobe Illustrator中设计的向量并轻松地在您的网站中实现它们。

SVG总结为十分

在我们进入之前，我将简要介绍一下SVG：

• SVG代表可缩放矢量图形。

• SVG用于在Web上定义矢量图形。

• XML格式用于定义矢量图形。

• SVG在调整大小或缩放时不会失去质量。

• SVG可以动画。

• SVG与dom集成，可以与JavaScript和CSS一起使用。

• SVG可以被编入索引，这意味着如果你在SVG中有文本，那么搜索引擎会选择它。

• SVG可以任何分辨率打印。

• SVG目前是W3C的推荐。

• SVG适用于所有现代浏览器，但在IE 8或更低版本中不支持。插件可以用于任何低于该值的插件。

让我们创建一些SVG形状

行

让我们开始吧。我们将创建一条线。我们通过将以下代码添加到HTML文档来完成此操作。

首先我们使用'svg'标签然后在里面添加xml标记。这是我们定义的内容：

• X1： x轴上线的起始位置

• Y1： y轴上线的起始位置

• X2： x轴上线的终点位置

• Y2： y轴上线的终点位置

因此，例如，如果我们想要创建一条对角线，那么我们可以将y2属性设置为200，这将使该行的终点减少200，从而创建一条对角线。我们也可以应用一些样式，我们用CSS做到这一点。这里我们使用了一些内联样式，但如果您愿意，可以在外部样式表中使用它们。

界

除了一些属性之外，可以以与线类似的方式创建圆。在这里，我们将创建一个银色圆圈，黑色边框，半径为50。

cx和cy属性是我们可以设置圆圈中间的x和y坐标的属性。如果我们错过了这些属性，那么圆圈的中心将被设置为“0”，这将导致圆圈从页面中被切除。最后，标记为“r”的属性设置圆的半径。

矩形

正如您现在所看到的，使用SVG创建形状非常简单。创建矩形也不例外。

与在CSS中设置元素的宽度和高度类似，我们也使用svg'rect'属性。

椭圆

椭圆的工作方式与创建圆的方式几乎相同，但是，这次而不是只有一个固定的半径，我们有x和y半径的单独属性。

多边形

多边形变得有点棘手（但只有一点点）。我们首先给多边形一个填充颜色，一个橙色的笔划和一个10的笔触宽度。然后我们将点属性传递给它。每对坐标定义多边形的每个角点的x和y坐标。在这个演示中，我创造了一个明星。

文本

如前所述，SVG很棒，因为当我们包含文本时，搜索引擎能够对其进行索引 - 与其他渲染引擎（如Flash）不同。

这是我们添加文字的方式：

在上面的代码中，您可以看到我们添加了x和y坐标。然后设置一些CSS样式，如字体系列，重量，大小和颜色。

路径

在路径标记内，我们需要专注于'd'属性。此“d”属性描述了要创建的路径。'd'属性中的每个命令都是以下命令字母之一，后跟其参数。'd'属性的命令如下：

• M：搬到

• L： lineto

• H：水平线

• V：垂直线

• C： curveto

• S：平滑曲线

• 问：二次贝塞尔曲线

• T：平滑的二次贝塞尔曲线

• 答：椭圆弧

• Z：近路

这是一些示例代码：

我们甚至可以从上面设置我们的文本以遵循这样的路径：

我们基本上在'defs'标签中定义了路径，并给它一个id为'path1'。然后，我们可以使用'textPath'属性将其应用于文本。

创建可扩展的SVG徽标和图标

深圳网页设计现在我们已经介绍了使用SVG创建形状的基础知识，现在是时候进行一些更复杂的事情了。幸运的是，虽然它并没有成为那个复杂，其实它实际上是非常简单的感谢Adobe Illustrator中。对于那些不了解Illustrator的人，可以描述为：

业界首屈一指的矢量绘图环境，用于创建可跨媒体扩展的图形。

打开Illustrator并创建徽标或图标。大多数专业徽标都应该使用矢量创建，这样您就可以从客户那里获得它们。如果没有，那么您可以尝试自己重新创建它们。如果您不熟悉在Illustrator中工作，那么Vectortuts +上会提供大量信息

获得徽标或图标后，转到“文件>另存为”，然后从“保存类型”下拉列表中选择“SVG”。为文件命名，然后单击“保存”。然后应打开SVG选项对话框。从那里选择“显示SVG代码”。然后，这将在浏览器中打开代码。你只需要在svg标签之间复制并包含svg标签就可以了。这有多简单？

您还可以使用Illustrator创建路径。只需在Illustrator中绘制一条线，就可以获取可用于路径的“d”属性数据，如前所述。例如，我为上面的'webdesigntuts +'文本创建的路径是在Illustrator中创建的，然后导出到我的文档中。

然后，您可以使用标准CSS方法将SVG标记设置或定位到文档中。您还可以将其包装在锚标记中以创建链接，或使用JavaScript将其定位以添加额外的功能。

结论

深圳网页设计现在，视网膜和像素密度是我们使用的每个设备和屏幕的一部分只是一个时间问题，并且这将继续以更大的密度推进。通过使用SVG，我们能够创建可缩放的图形，使屏幕清晰，随着屏幕分辨率的提高，它将为未来做好准备。当然，SVG在各种情况下并不实用，但对于网络上基于矢量的插图而言，它绝对是最好的前进方式。