HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5高级知识 ——> SVG SVG图片的创建方法

SVG SVG图片的创建方法

2015/07/11 07:23:07 | 作者:HTML5学堂(码匠) | 分类:HTML5高级知识 | 关键词: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当中。

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

SVG文件的编辑

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

SVG - 示例demo

  1. <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  2.     <circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
  3.     <circle cx="350" cy="180" r="20" fill="black" />
  4.     <circle cx="450" cy="180" r="20" fill="black" />
  5.     <clipPath id="faceClip">
  6.         <rect x="300" y="240" width="220" height="60" />
  7.     </clipPath>
  8.     <circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
  9. </svg>

欢迎沟通交流~HTML5学堂

方法2 在HTML中直接使用SVG

SVG - 示例demo

  1. <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  2. <g>
  3. <circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
  4.     <circle cx="350" cy="180" r="20" fill="black" />
  5.     <circle cx="450" cy="180" r="20" fill="black" />
  6.     <clipPath id="faceClip">
  7.         <rect x="300" y="240" width="220" height="60" />
  8.     </clipPath>
  9. <circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
  10. </g>
  11. </svg>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS