SVG图像

SVG(Scalable Vector Graphics)是一种基于XML的矢量图格式,和传统位图不同,SVG是纯文本格式的,而且占用空间极小,在互联网客户端开发领域应用非常多。其实一般来说,使用SVG并不需要了解其具体语法,我们只要用设计工具「画」出矢量图就可以了,但如果涉及矢量图编辑等功能,了解SVG具体实现就是必须的了。

MDN的SVG教程

在网页中引用SVG

网页中引入SVG一般有两种方式:直接编写<svg>或者引入矢量图到<img>标签。

index.html

<svg>
    <circle cx="100" cy="100" r="50" />
</svg>

1.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="100" r="50" />
</svg>

其中,前者一般用于利用SVG实现动画等用途,因为我们可以控制SVG的DOM结构,后者一般是设计师交付给程序员的图标之类进行导入。

width,height和viewBox

HTML中使用SVG一个比较诡异的问题是,默认情况下,一个SVG图片大小就是300x150,即使你里面包含一个100x100的圆,SVG默认也不是一个矩形,其实<svg>更像是一个画布,我们在里面用XML语言作画,我们需要指定一些参数来控制元素显示的坐标和画布大小。下面是一个例子:

<svg width="100" height="100" viewBox="0 0 50 50">
    <circle cx="50" cy="50" r="50" />
</svg>
  • width:图片宽度
  • height:图片高度
  • viewBox:视口,四个参数分别是左上角坐标和视口宽高

其实这个视口比较难理解,上面我们指定了一个100x100的SVG图片,视口就是在这个图片的基础上,只显示从(0,0)出发,宽高各50的一个区域,视口就是这个意思。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap