SVG - 创建SVG图片

2018-03-12 10:16:01 浏览数 (1)

SVG - 创建SVG图片

HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。没有合适的中文文档，自己只能去翻译英文文档（唉，英语不好啊）。今天先来说说SVG的基本知识以及创建SVG的基本方法。

SVG是什么

W3C推荐的网页图形格式，类似于Flash，SVG是一种描述二维矢量图形的标记语言，但它是一种开发的以XML为基础的语言，不是一种私有语言。

SVG的支持程度

IE8-以及Android 2.3默认浏览器是不支持SVG的

对SVG的基本理解

可以把SVG想象成类似于HTML的图形，可以与其他浏览器技术，如JavaScript、CSS、DOM无缝集合

为何使用SVG-SVG的优势

1、开发者可以使用任何简单的文本/网页编译器进行创建和修改。不需要Flash、PhotoShop、Paint等软件。

2、与像素无关，可以放大或者缩小，甚至打印成任意大小，图片质量不会改变。

创建SVG图片

方法1：使用外部引入SVG的方式

SVG是一个以.svg结尾的文本格式的文件，可以将这个文件以普通图片的方式嵌入到DOM当中。

代码语言：javascript复制
<object data="XXX.svg" type="image/svg xml" />

SVG文件的编辑

代码语言：javascript复制
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>

SVG - 示例demo

代码语言：javascript复制
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
    <circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
    <circle cx="350" cy="180" r="20" fill="black" />
    <circle cx="450" cy="180" r="20" fill="black" />
    <clipPath id="faceClip">
        <rect x="300" y="240" width="220" height="60" />
    </clipPath>
    <circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</svg>

方法2 在HTML中直接使用SVG

SVG - 示例demo

代码语言：javascript复制
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
    <circle cx="350" cy="180" r="20" fill="black" />
    <circle cx="450" cy="180" r="20" fill="black" />
    <clipPath id="faceClip">
        <rect x="300" y="240" width="220" height="60" />
    </clipPath>
<circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</g>
</svg>
svg html5

0 人点赞