jj游戏 是WTH吗?:在Web上使用可缩放矢量图形

jj游戏 是WTH吗?:在Web上使用可缩放矢量图形

如果您关注我们的博客,您会知道Drew最近写了一篇文章 如何为网站优化图像。在其中,他简要提到了jj游戏。在这篇文章中,我将详细解释什么是jj游戏以及它们如何工作。

A 可缩放矢量图形 , 要么 jj游戏 ,是一种新型的图像格式,在We​​b领域越来越流行。你们中的许多人都熟悉JPG,GIF或PNG图像的栅格图形格式。不幸的是,如果缩放比例过大,您可能已经看到这些图像像素化。另一方面,jj游戏图像永远不会像素化。如今,考虑到用于访问网站的所有不同设备,这是一个巨大的优势。

jj游戏 通过XML代码创建。代码如下:

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="2 -2 218.9 200.5"  xml:space="preserve">
  <title>The Gateway Arch</title>
<desc>Simple Line Drawing of the Arch</desc>
<path class="arch" d="M110.1,3.6c9.7,0,82.9,6.2,104.9,193.3h-22.9c0,0-11.5-182.9-82.7-185.5c0,0-0.4-0.1-1.3-0.1c-9.4,0-66.2,7.4-80.2,183.2
	l-24-0.9C3.9,193.6,35.5,4.3,110.1,3.6C110.1,3.6,109.4,3.6,110.1,3.6"/>
</svg>

看笔 jj游戏 示例1 通过安妮·麦康斯(@tigeranniemac ) 上 密码笔 .

图像看起来像这样:

看笔 jj游戏 示例1 通过安妮·麦康斯(@tigeranniemac ) 上 密码笔 .

尽管可以将JPG嵌入jj游戏图像,但是大多数jj游戏图像都是矢量图形或基于点,形状和线的图形。也就是说,您可以选择应用滤镜或修改形状,笔触,填充,渐变和文本等选项。而且由于jj游戏基于代码,因此您可以根据用户在您的站点上进行的事件来修改图像。 jj游戏 可以通过CSS3,JS以及它自己的动画语言SMIL(同步多媒体集成语言)进行动画处理。您可以根据滚动,点击按钮,表单输入或您可以做的任何其他事情来为动画计时。这是一些动画的示例:

看笔 jj游戏 示例2 通过安妮·麦康斯(@tigeranniemac ) 上 密码笔 .

我们可以在我们的网站上使用jj游戏吗?

尽管jj游戏于1999年首次引入,但直到最近才将该格式推广并添加到网站中。而且,如果要考虑站点兼容性,那么就不应该如此-几乎所有的浏览器都支持它(我正在向您查询IE8)。即使大多数浏览器都可以处理jj游戏格式,但并不是每个浏览器都支持所有功能。但是,如果您可以找到一个足够有能力的开发人员,他们将找到解决方法。 (眨眼。)

 svg犬

我强烈建议关注 Sara Soueidan在Twitter上 如果您有兴趣扩大对jj游戏的了解。她的字面意思是 jj游戏 动画指南,在座无虚席的会议上发表演讲,并在Twitter和 博客 .

单击此处查看W3C的jj游戏官方规范。

 

安妮·麦康斯(Annie McCance)

安妮喜欢讲故事。这就是为什么她倾向于吸引人且有意义的项目,但最重要的是易于访问且功能强大的项目。幸运的是,她掌握了网络开发知识,可以轻松解决所有问题。

安妮·麦康斯(Annie McCance)的更多帖子