最近想把公司的系统结构图用web页面表示出来，以便将相关的资源信息串联起来方面查询。想到的画结构图的方法有三种：SVG、HTML5和flash。其中只SVG熟悉一点，曾经学xml时了解过一点，那么就从svg开始吧。
SVG即Scalable Vector Graphics，可缩放向量图形，w3c标准，用xml格式来表示图形内容。除IE外其它主流浏览器(如Firefox, Chrome, Safari,Opera)都支持SVG。IE有它自己的一套图形格式VML，不过在IE9中会添加对SVG的支持。不过可以通过
Adobe SVG Viewer插件来在IE中查看SVG图形。SVG还兼容W3C的其它一些标准如CSS、HTML：可以html中嵌入svg,使用css来定义样式，通过javascript来操作svg元素实现动态效果。
如想了解更多关于SVG的介绍，可访问如下wiki页面：
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
一个简单的SVG文件，保存为test1.svg，并用支持SVG的浏览器打开：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600">
<title>Draw</title>
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
<svg>是根元素，所有svg都位于名字空间"http://www.w3.org/2000/svg"下。 Mozilla的svg项目推荐添加另一个名字空间：xmlns:xlink="http://www.w3.org/1999/xlink"。
- <svg>的属性width指定图形的宽度，而height就是指定高度了。
- <circle>画一个圆，cx、cy是中心点的位置，r为半径。stroke为边线颜色，stroke-width为边线宽度，fill为填充色。stroke、stroke-width、fill即可以单独的属性指定，也可在style中指定。
SVG支持一些基本形状（Rectangle,Circle,Ellipse,Line,Polygon,Polyline,Path），滤镜(filiter)，渐变色(Grandient)，组合(composition)，剪切(clip)和遮蔽(mask)等。可以通过w3cschool的online教程来进一步学习。
Refercen:
分享到：
相关推荐
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许在网页上创建和显示复杂的图形，包括线、曲线、形状等，并且这些图形可以无损地放大或缩小，保持清晰度不变。SVG-pan-zoom-master 是一个专门为...
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它允许开发者在Web上创建和展示高质量的图形，这些图形可以无限缩放而不会失真。SVG-pan-zoom库是专为JavaScript设计的一个工具，用于实现SVG图像的平...
PDF2SVG是一款强大的工具，主要用于将PDF文档转换为SVG（Scalable Vector Graphics）格式的文件。SVG是一种基于XML的矢量图像格式，它能够无损地缩放，且文件体积小，适合于网络上使用和进行二次编辑。在标题和描述...
SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于XML的图像格式，其优点在于图像质量高、体积小，且支持动态生成，非常适合于这种需要动态生成和验证的场景。 **SVG-CAPTCHA的特点与优势** 1. **...
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许用户创建和编辑图形，而不会因放大或缩小而损失质量。SVG-Edit 2.6 是一个开源的SVG编辑工具，专为方便用户编辑或创建SVG文件而设计。这个版本...
首先，SVG（Scalable Vector Graphics）是一种矢量图形格式，它的优点在于可以无限缩放而不会失真，同时文件体积小，适用于网页上的图标或复杂图形。然而，直接在React应用中使用SVG文件可能会导致一些问题，如文件...
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许通过纯文本代码创建和编辑图形，因此在Web开发中非常受欢迎，尤其是在需要高质量、可缩放的图形时。JavaScript SVG库则提供了与SVG图形进行交互...
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许用户创建复杂的图形，包括线条、形状、渐变、文本等，且这些图形可以无限缩放而不失真。SVG在网页设计、图标制作、软件界面设计等领域广泛应用...
Sharp is a Scalable Vector Graphics (SVG) implementation for Android. It facilitates loading vector graphics as SharpDrawables, and can effectively be used wherever a conventional image would be ...
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它被广泛用于网页设计和其他图形应用中，因为SVG图像可以无损缩放，不会因放大而失真。SVG编辑器则是用来创建、修改和优化SVG图形的工具，允许用户以...
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许用户创建和编辑图形，这些图形在放大时不会失真。SVG-Edit是一个开源的、基于Web的SVG编辑器，它使用ActionScript 3 (AS3)，即Flash平台上的...
### SVG学习笔记（Scalable Vector Graphics） #### SVG概述 SVG，全称为可缩放矢量图形（Scalable Vector Graphics），是一种基于XML的语言，用于描述二维矢量图形及其行为。SVG不仅支持静态图形，还支持动画以及...
在前端开发中，SVG（Scalable Vector Graphics）由于其可缩放性和丰富的图形表现力，已经成为绘制矢量图形的标准。然而，当项目中的SVG图标数量增多时，管理这些图标可能会变得复杂。为了简化这一过程，`svg-classic...
在前端开发中，SVG（Scalable Vector Graphics）由于其可缩放性和丰富的图形表现力，已经成为绘制矢量图形的标准。然而，将SVG图标引入Web项目时，如何管理和注入SVG到DOM（Document Object Model）中是个挑战。...
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它在Web开发中越来越受欢迎，因为它能够提供高质量的图形，并且在放大时不会失真。"前端开源库-svg-kit"是专门为前端开发者设计的一个小型SVG工具包，...
可缩放矢量图形（Scalable Vector Graphics，简称SVG）是一种基于XML的矢量图像格式，由万维网联盟（W3C）制定。SVG 1.1规范作为SVG的一个关键版本，于2003年1月14日发布为W3C推荐标准，旨在定义用于描述二维矢量和...
在GIS中能用到的东东，在编写与SVG有关的GIS能用到的，无论是...SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。
**SVG-T**（Scalable Vector Graphics Tiny）是为移动设备设计的一种矢量图形格式，由W3C（World Wide Web Consortium）定义并标准化。它是一种轻量级且功能强大的格式，特别适合于手机和其他资源受限的移动设备。...
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许开发者创建清晰、可缩放的图形，无论是在小屏幕设备还是大屏幕上都能保持高质量的显示效果。然而，在JavaScript环境中，直接处理SVG文件可能会...
“hobart_svg”很可能是一个处理SVG（Scalable Vector Graphics）的Python库。SVG是一种基于XML的矢量图形格式，广泛用于网页和应用程序中的图形设计，因为它可以无损缩放且文件大小较小。Python库如“hobart_svg”...