跳到主要内容

开始使用SVG进行响应式网页设计

Image courtesy of the W3C

图片由W3C提供

关于HTML5的一个有趣的事情是它与可缩放矢量图形或SVG的集成。

就像我们在免费电子书中提到的那样Web UI最佳实践,SVG非常适合响应式设计,因为无论浏览器的分辨率如何,您都可以创建一个不会像素化的可伸缩图像。在这篇文章中,我们将介绍如何在下一个响应式网站中使用SVG。

请参阅Sara Soueidan谈论SVG生成伦敦2015-今天买票

SVG简介

使用SVG,您可以直接在浏览器中绘制图形,因为它们可以根据视口向上和向下缩放。您需要一些HTML和CSS的基本知识才能使用它,如果您愿意,还需要一些JavaScript在浏览器中操作SVG

但是,SVG不应该与之混淆元件,它允许您使用JavaScript动态绘制图形。

SVG是广泛支持浏览器。它独立于分辨率,使其成为响应式设计的理想选择。它使用基于DOM节点的API,如果你不熟悉JavaScript,那么就有了那里的图书馆可以帮到你

考虑到所有这些,让我们开始吧。您只需创建一个普通的HTML5页面即可将SVG代码直接放入其中

       

第4-7行创建了一个带有石灰和紫色的polgon,如下所示:

除了可以通过绘制坐标以创建每个点而使用不同颜色创建多边形之外,这本身并不能说明多少。

创建自己的SVG页面

让我们看一下如何创建自己的SVG页面,其中只包含一个标题为“HTML5练习1”的红色圆圈,基于该书跳转HTML5

如您所见,代码创建了一个红色的圆圈,可以使用浏览器或设备进行缩放。 SVG本身的代码如下所示:

  

所以你已经确定了代码中的形状和圆的大小。在多边形示例中,形状有十个点,这些点如下所示:

这同样适用于这里的圈子:

在该行中,cx表示宽度,其表示坐标系中的水平长度,而cy表示高度作为垂直长度。当然,'r'是半径。您还可以指定视图框属性,它们是四个值:min-x,min-y,width和height。

要使其更小或更大,您可以更改值。因为它是一个圆形,它必须是相同的,否则形状的一部分将被有效地切除。所以要使圆圈更大,增加100个值。要指定填充颜色,只需添加“fill = Red”(可以是蓝色,绿色或任何您喜欢的十六进制颜色)。

如果要为圆圈添加边框,则必须添加笔触颜色,如下所示。

将文档另存为XHTML文档,以确保更好的浏览器兼容性在第一行添加XML声明

你可以创建使用SVG的不同形状, 包含:

  • 线
  • 矩形(矩形)
  • 椭圆
  • 多边形

您还可以使用:

  • Path:允许定义任意路径
  • 折线:定义从多个线定义构建的形状

使用SVG,您可以使用渐变和模式“绘制”形状,这要归功于元素“linearGradient”和“gradientTransform”。这些由stop元素定义,在标记中,我们将在SVG标记中使用'def'元素。

所以,拿走我们刚刚创建的圆圈,让我们看看如何为它添加渐变。

 HTML5 SVG练习2 

HTML5 SVG练习2

正如您所看到的,我们首先命名了我们的圆圈类型并在进行添加'defs'之前定义了它的大小。这些告诉浏览器我们将使用自定义渐变颜色,填充由颜色和停止值定义。我们告诉它我们想要一个黄色和蓝色的线性渐变。

你也可以使用SVG元素创建模式使用patterns元素及其属性。与上面的代码一样,您可以填充或描边这些模式以及设置坐标和使用defs。

关于如何使用SVG以及如何使用SVG的灵感,还有更多内容,请查看这些内容SVG的例子会让你的下巴掉下来

有关创建SVG的其他提示

您可以使用SVG代替图像精灵以及媒体查询以创建轻量级的页面。

到目前为止,我们已经研究过使用内联SVG。但您可以使用普通的图形软件创建SVG。比如Illustrator,和使用CSS将它们放入您的设计中并将它们放在容器中。要在调整窗口大小时隐藏或显示元素,请在a中将媒体查询添加到SVG