SVG笔记

一:什么是SVG?

对于SVG的定义如下:

①:SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics)。

②:SVG 用于定义用于网络的基于矢量的图形。

③:SVG 使用 XML 格式定义图形。

④:SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。

⑤:SVG 是万维网联盟的标准。


二:SVG的优势是什么?

SVG的优势有如下定义:

①:SVG 图像可通过文本编辑器来创建和修改。

②:SVG 图像可被搜索、索引、脚本化或压缩。

③:SVG 是可伸缩的。

④:SVG 图像可在任何的分辨率下被高质量地打印。

⑤:SVG 可在图像质量不下降的情况下被放大。


三:SVG与Canvas的区别在于什么地方?

①:SVG 是一种使用 XML 描述 2D 图形的语言。    Canvas 通过 JavaScript 来绘制 2D 图形。

②:SVG 基于 XML,这意味着 SVG可以给每一个图形绑定事件,但是Canvas是基于JavaScript,这就意味着Canvas无法给每一个图形绑定事件。(只能给canvas整个画布绑定事件,还有一种解决方案是使用第三方库)。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

③:Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。

如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

④:兼容性不同。 SVG的兼容性更好。

SV与Canvas之间的比较:

Canvas

-------依赖分辨率

-------不支持事件处理器

-------弱的文本渲染能力

-------能够以 .png 或 .jpg 格式保存结果图像

-------最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

-------不依赖分辨率

-------支持事件处理器

-------最适合带有大型渲染区域的应用程序(比如谷歌地图)

-------复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

-------不适合游戏应用


四:SVG在html中是怎样使用的?

首先SVG引入到html中的方法如下:

SVG 文件可通过以下标签嵌入到HTML 文档:<embed>、<object>、<iframe>。

使用<embed>标签引入 ------ <embed src="xxx.svg" type="image/svg+xml" />

①:优势:所有主要浏览器都支持,并允许使用脚本。

②:缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)。

使用<object>标签引入 ------- <object data="xxx.svg" type="image/svg+xml"></object>

①:优势:所有主要浏览器都支持,并支持HTML4,XHTML和HTML5标准。

②:缺点:不允许使用脚本。

使用<iframe>标签引入 ------- <iframe src="xxx.svg"></iframe>

①:优势:所有主要浏览器都支持,并允许使用脚本。

②:缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)。

Tip:值得注意的地方是在使用单标签的时候<embed src="" />一定要有  /  闭合不然会报错!!!

SVG的代码可以直接嵌入到HTML页面中,或直接链接到SVG文件。

直接在HTML嵌入SVG代码

在Firefox、Internet Explorer9、谷歌Chrome和Safari中,你可以直接在HTML嵌入SVG代码。

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

         <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red">

</svg>

链接到SVG文件

可以用标签链接到一个SVG文件:链接到SVG文件。

<a href="circle1.svg">View SVG file</a>


五:SVG标签的元素属性有那几个?

在SVG标签中其自身所拥有的属性就和Canvas的一样就只有两个属性:width="";和height="";


六:对SVG默认形状的一个认识?

SVG和Canvas一样都是行内块级元素,默认的宽高大小都是300px  X  150px;


七:对SVG的图形的认知?(SVG Shapes)

SVG有一些预定义的形状元素,可被开发者使用和操作:

-------矩形 <rect>

-------圆形 <circle>

-------椭圆 <ellipse>

-------线     <line>

-------折线  <polyline>

-------多边形 <polygon>

-------路径   <path>

SVG 矩形 ---- <rect>

实例1---------- <rect> 标签可用来创建矩形,以及矩形的变种  如下代码显示:

<svg width="600" hegiht="600" id="mySvg">

         <rect   x="X轴起始坐标"  y="Y轴起始坐标"  rx="产生圆角的大小"  ry="产生圆角的大小"  width="矩形的宽度"  height="矩形的高度"  stroke="描边的颜色"  stroke-width="描边的宽度"  fill="填充的颜色"   />

</svg>

SVG 圆形 ---- <circle>

实例2----------<circle>标签可用来创建一个圆   如下代码显示:

<svg  width="600"  height="600">

        <circle  cx="X轴起始坐标"  cy="Y轴起始坐标"  r="圆的半径"  stroke="描边的颜色"  stroke-width="描边的宽度"  fill="填充的颜色"  />

</svg>

SVG 椭圆 ---- <ellipse>

实例3----------<ellipse>标签可用来创建一个椭圆 

Tip:椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的。 如下代码显示:

<svg    width="600"  height="600"  id="mySvg">

        <ellipse  cx="X轴起始坐标"  cy="Y轴起始坐标"  rx="X轴的半径"  ry="Y轴的半径"  stroke="描边的颜色"  stroke-width="描边的宽度"  fill="填充的颜色"  />

</svg>

代码解析:

-------CX属性定义的椭圆中心的x坐标

-------CY属性定义的椭圆中心的y坐标

-------RX属性定义的水平半径

-------RY属性定义的垂直半径

SVG 直线 ----- <line>

实例4 ---------- <line> 标签可用来创建直线    下面是SVG代码:

<svg  width="600"  height="600"   id="mySvg">

      <line  x1="0"  y1="0"  x2="200"  y2="200"  style="stroke:rgb(255,0,0);stroke-width:2"  />

</svg>

代码解析:

-------x1 属性在 x 轴定义线条的开始

-------y1 属性在 y 轴定义线条的开始

-------x2 属性在 x 轴定义线条的结束

-------y2 属性在 y 轴定义线条的结束

SVG 多边形 ---------  <polygon>

实例5 ------- <polygon> 标签用来创建含有不少于三个边的图形。 

多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。如下代码显示:

<svg   width="600"   height="600"  id="mySvg">

       <polygon  points="200,10,250,190,160,210"  style="fill:lime;stroke:purple;stroke-width:1"  />

</svg>

利用多边形创建一个五角星

<svg  width="600"  height="600">

       <polygon points="100,10 40,180 190,60 10,60 160,180"   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;">

</svg>

改变 fill-rule 属性为 "evenodd"可有另外一种效果。

代码解析:

-------- points 属性定义多边形每个角的 x 和 y 坐标。

SVG 曲线 ----- <polyline>

实例6 ------- <polyline> 标签元素是用于创建任何只有直线的形状  如下代码显示:

<svg   width="600"  height="600">

      <polyline   points="20,20  40,25  60,40  80,120  120.140  200,180"  style="fill:none;stroke:black;stroke-width:3" />

</svg>

SVG 路径 -------  <path>

实例7 --------  <path>  标签元素用于定义一个路径。

下面的命令可用于路径数据:

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Bézier curve

T = smooth quadratic Bézier curveto

A = elliptical Arc

Z = closepath

注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

<svg width="600"  height="600">

       <path  d="M150 0  L75  200  L225  200  Z "  />

</svg>

代码解析:

上面的例子定义了一条路径,它开始于位置150 0,到达位置75 200,然后从那里开始到225 200,最后在150 0关闭路径。

SVG 文本 --------- <text>

实例8  ---------  <text>  标签元素用于定义文本。 如下代码显示:

<svg   width="600"  height="600">

      <text  x="70"  y="15"  fill="red"   transform="rotate(30 20,40)">I  Love  You</text>

</svg>

以上就是对SVG的大概了解的概况。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 一、什么是SVG? SVG指可伸缩矢量图形(Scalable Vector Graphics); SVG用来定义用...
    清心挽风阅读 1,386评论 1 3
  • SVG 学习笔记 SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) S...
    Penn_Xu阅读 956评论 0 1
  • 一.什么是SVG? SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义...
    nightZing阅读 17,023评论 11 62
  • 上个项目用到svg实现一个水流的动画,鉴于没学习几天,所以懂的也不多,就此分享一下。首先svg是什么,svg可缩放...
    会飞的猪l阅读 4,078评论 0 5
  • SVG API: SVG是一种可缩放矢量图形,一种二维图形表示语言 与canvas不同的是,在浏览器的开发工具中能...
    Iris_mao阅读 1,002评论 0 5