SVG是一种以快速开发和高性能为目标来开发图形的Google XML格式语言。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8868.html
它有以下特点 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8868.html
- SVG(Scalable Vector Graphics)是一种基于XML的语言，用于定义基于矢量的图形。
- SVG旨在通过网络显示图像。
- 作为矢量图像，无论SVG图像如何缩小或调整大小，都不会丢失质量。
- SVG图像支持交互性和动画。
- SVG是W3C标准。
- 其他图像格式(如光栅图像)也可以用SVG图像杵着。
- SVG与HTML的XSLT和DOM很好地集成。
优点
SVG有以下优点 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8868.html
- 使用任何文本编辑器来创建和编辑SVG图像。
- 基于XML，SVG图像是可搜索的，可索引的，并且可以被脚本化和压缩。
- SVG图像具有高度的可扩展性，因为不管它们如何缩小或调整大小，它们都不会丢失质量。
- 在任何分辨率下都有良好的打印质量。
- SVG是一个开放标准。
缺点
SVG有以下缺点 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8868.html
- 与二进制格式的光栅图像相比，文本格式大小更大。
- 即使对于小图像，尺寸也可能很大。
示例
以下XML片段可用于在Web浏览器中绘制圆圈。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8868.html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>
将SVG XML直接嵌入HTML页面 - test-svg.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8868.html
<html>
<title>SVG Image</title>
<body>
<h1>Sample SVG Image</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>
</body>
</html>
保存上面代码，并使用浏览器浏览 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8868.html
注意:可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。 在Internet Explorer中，需要使用activeX控件才能查看SVG图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8868.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8868.html
SVG如何与HTML集成
<svg>元素表示SVG图像的开始。<svg>元素的width和height属性定义了SVG图像的高度和宽度。- 在上面的例子中，使用了一个
<circle>元素来绘制一个圆。 cx和cy属性表示圆的中心。 默认值是(0,0)。r属性表示圆的半径。- 其他属性描边和描边宽度控制圆的轮廓。
fill属性定义了圆的填充颜色。- 闭合
</ svg>标记指示SVG图像的结束。