html5矢量图形SVG SVG在html中 图形在svg中的使用绘制

SVG在html中 图形在svg中的使用绘制

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG是一种使用xml技术描述图形的语言，使用 XML 格式定义图像。
 1、SVG指可伸缩矢量图形
 2、SVG用于定义用于网络的基于矢量的图形
 3、SVG是一种基于xml语法的图像格式
 4、SVG图像在放大的情况下图形不会失真
 SVG的优点
  1、SVG是可伸缩的，高保真图形、无限放大且不会失真
    2、SVG可通过文本编辑器创建和修改
    3、SVG可被搜索、索引、脚本化和压缩
    4、SVG可在任何的分辨率下被高质量地打印
    5、SVG文件体积较小
    6、SVG可在图像质量不下降的情况下被放大
  SVG与canvas的区别：
	SVG
		不依赖分辨率
		支持事件处理器（可绑定事件）
		最适合大型渲染区域的应用程序（如：百度地图）
    canvas
        依赖分辨率
       不支持事件处理器
       最适合图像密集型的应用程序（游戏）
SVG是可伸缩的，高保真图形、无限放大且不会失真
SVG可通过文本编辑器创建和修改
SVG可被搜索、索引、脚本化和压缩
SVG可在任何的分辨率下被高质量地打印
SVG文件体积较小
SVG可在图像质量不下降的情况下被放大


c1.svg：

<!-- 写svg标签的时候，在html页面中直接 输入 svg-svg+回车<svg width="600" height="600" -->
<!-- 直接在html嵌入SVG代码 -->
<svg width="600" height="600"
     viewBox="" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
       
<!-- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)  r属性定义圆的半径 -->
     <circle cx="100" cy="100" r="50" fill="red" stroke="green" stroke-width="10" style=""/>
     <circle cx="300" cy="400" r="100" fill="pink" stroke="bule" style=""/>
     <circle cx="400" cy="200" r="150" fill="orange" stroke="red" style=""/>
</svg>

html：
<!-- SVG 意为可缩放矢量图形 -->
    <div>
    <!-- 在html文件中，写a超链接标签，用 <a> 标签链接到一个 SVG -->
        <a href="c1.svg">查看c1.svg文件</a>
    </div>

    <!-- 通过以下几种方法 可以直接在页面中显示 我们的svg图形 
    <iframe>、<img>、<embed>、<object>-->
    <div>
        <iframe src="c1.svg" width="600" height="600" frameborder="0"></iframe>
    </div>
    <div>
        <img src="c1.svg" alt="">
    </div>

    <div>
        <embed src="c1.svg" type="image/svg+xml">
    </div>

    <div>
        <object data="c1.svg" type="image/svg+xml"></object>
    </div>

    <div>
        <img src="薯条.svg" alt="">
        <img src="雪糕.svg" alt="">
    </div>
</body>
</html>

预览：