SVG简介PPT.pptVIP

SVG简介 目录 SVG 什么是SVG？  SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 SVG 的历史和优势 在 2003 年一月，SVG 1.1 被确立为 W3C 标准。 参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。 与其他图像格式相比，使用 SVG 的优势在于： SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图） SVG 可以与 Java 技术一起运行 SVG 是开放的标准 SVG 文件是纯粹的 XML SVG 的主要竞争者是 Flash。 与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。 SVG 一个例子 ?xml version=“1.0” standalone=“no”? !DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN“ ”/Graphics/SVG/1.1/DTD/svg11.dtd” svg width=“100%”height=“100%” version=“1.1”xmlns=“/2000/svg” circle cx=“100” cy=“50” r=“40” stroke=“black” stroke-width=“2” fill=“red/ /svg --standalone 属性规定此 SVG 文件是否是“独立的”;--xmlns 属性可定义 SVG 命名空间;--stroke和stroke-width 属性控制如何显示形状的轮廓。 HTML 页面中的 SVG 三种把 SVG 文件嵌入 HTML 页面的不同方法 ： 1、使用 embed 标签--被所有主流的浏览器支持 embed src=rect.svg width=300 height=100 type=image/svg+xml pluginspage=/svg/viewer/install/ / 2、使用 object 标签--被所有较新的浏览器支持 object data=rect.svg width=300 height=100 type=image/svg+xml codebase=/svg/viewer/install/ / 3、使用 iframe 标签 iframe src=rect.svg width=300 height=100 /iframe SVG 形状 SVG 有一些预定义的形状元素，可被开发者使用和操作： 矩形 rect 圆形 circle 椭圆 ellipse 线 line 折线 polyline 多边形 polygon 路径 path SVG中Path路径 下面的命令可用于路径数据： M/m：移动； L/l：画线； H/h：画一条水平线； V/v：画一条垂直线； A/a：画一条弧线； C/c：画一条三次贝塞尔曲线； S/s：画一条平滑的贝塞尔曲线； Q/q：画一条二次贝塞尔曲线； T/t：画一条平滑的二次贝塞尔曲线； Z/z：关闭路径。 　　注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。 SVG 滤镜 svg滤镜用来给图形和文字添加特殊效果您可以在每个 SVG 元素上使用多个滤镜 filter 标签用来定义 SVG 滤镜。filter 标签使用必需的 id 属性来定义向图形应用哪个滤镜filter 标签必须嵌套在 defs 标签内 。defs 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。 ?xml version=1.0 standalone=no? !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN /Graphics/SVG/1.1/DTD/svg11.dtd svg width=100% height=100% version=1