SVG - 创建SVG图片

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当中。

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

SVG文件的编辑

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>

SVG - 示例demo

<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

<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>

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-08-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

如何让旧浏览器支持HTML5新标签

HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,...

2907
来自专栏州的先生

Python GUI教程(六):使用Qt设计师进行窗口布局

2375
来自专栏一“技”之长

标签之美八——网页框架 原

其中属性设置的值可以是百分比,可以是固定值,*符号表示除了已经分配后的剩余空间。上面代码中每个html文件设置不同的背景颜色,效果如下:

841
来自专栏Guangdong Qi

iOS 11 更大的导航 (官方翻译版)

1943
来自专栏Nian糕的私人厨房

CSS banner图响应式居中显示

在 PC 网站首页,banner 图作为网页中最大的一张图片,在传达网页的的主要信息的同时,也吸引着浏览者的所有注意力,所以 banner 图的展示方式直接影响...

833
来自专栏积累沉淀

js监控输入密码检测大写键盘是否锁定

? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="...

1985
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

3727
来自专栏前端知识分享

第122天:移动端开发常见事件和流式布局

可以看到,在京东各个模块的主容器中,都设置了最大最小宽度和宽度100%,而在导航区块中,由于一行有5个小区块,所以设置了宽度为20%,使得小区块也能达到自适应的...

1664
来自专栏互联网杂技

移动端开发的一些技巧

开篇语 最近接手了一个移动端的项目。个人感觉是自己做得比较快而且比较健壮的一个。。。移动端最主要就是页面要适用不同的手机屏幕,ipad等。下面就分享一些技巧,让...

28410
来自专栏李蔚蓬的专栏

HTML & CSS 知识点梳理(内涵大量Demo噢~)

1.<html>标记 <html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头,以</html>标记结束,HTML页面的所有标记都要放...

1272

扫码关注云+社区