SVG可缩放矢量图形

Posted 2020-08-29 Heroine.z

• SVG是指可伸缩矢量图形
• SVG用来定义用于网络的基于矢量的图形
• SVG使用XML格式定义图形
• SVG图像在放大或缩小（改变尺寸）的情况下，其图形质量不会受受损失
• SVG是W3C的一个标准

与其他图像格式相比，使用SVG的优势在于：

• SVG可被非常多的工具读取和修改（比如记事本）
• SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
• SVG是可伸缩的
• SVG图像可在任何的分辨率下被高质量地打印
• SVG可在图像质量不下降的情况下被放大
• SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG可以与Java技术一起运行
• SVG是开放的标准
• SVG文件是纯粹的XML

在Web浏览器中让SVG显示通过下面几种方法来实现：

• 指向SVG文件地址
• 将SVG直接嵌套在html中

而将SVG图像嵌入到HTML文件有多种方法：

• 使用<iframe>元素来嵌入SVG图像

• <iframe src="http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg" width="200" height="200" ></iframe>

• 使用<img>元素来嵌入SVG图像

• <img src="http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg" width="300" />

• 将SVG图像作为背景图像嵌入

• div {
   background: url(‘http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg‘) no-repeat center;
   background-size : 200px 200px;
   }

• 直接使用<svg>元素

• <div> 
  
  　　<svg enable-background="new 0 0 145 145" id="Layer_1" version="1.1" viewBox="0 0 145 145" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  　　　　<g> 
            <path d="M95.727,56.11c-2.29-3.814-4.565-6.092-4.617-6.146c-0.48-0.48-2.289,1.668-2.791,2.309 c-0.762,0.981-2.563,2.625-6.367,4.876c-3.802,2.255-9.599,5.132-18.35,8.687c-3.747,1.524-6.766,3.085-9.192,4.666 c3.136-0.364,6.856-0.784,7.613-0.815c2.007-0.082-0.404,4.203-9.474,2.116c-1.186,0.895-2.195,1.796-3.047,2.699 c-1.388,1.474-2.355,2.959-2.971,4.422c-0.617,1.463-0.877,2.9-0.876,4.246c0.005,3.039,1.285,3.753,2.512,5.495 c1.234,1.746,3.872,2.962,3.872,2.962s-0.704-1.33-1.719-2.789c-1.022-1.463-1.976-3.455-1.971-5.668 c0.001-1.004,0.188-2.065,0.665-3.201c0.275-0.653,0.652-1.335,1.149-2.038c0.466,2.206,1.478,6.081,3.454,10.021 c1.499,2.98,3.555,4.208,6.406,6.524c2.844,2.317,6.521,5.686,11.017,5.679c0.11,0,0.221-0.001,0.332-0.003 c3.876-0.057,7.15-3.391,9.724-5.757c3.87-3.555,6.308-7.082,7.847-12.521c1.531-5.446,2.713-11.542,3.009-15.689 c0.522-7.306,0.163-10.061-0.246-11.266c0.572,0.787,1.188,1.696,1.808,2.743c2.096,3.534,4.127,8.399,4.123,13.856 c-0.002,3.122-0.653,6.447-2.35,9.907c-1.698,3.459-4.452,7.06-8.7,10.68c0,0,9.238-5.66,11.119-9.493 c1.882-3.831,2.628-7.595,2.626-11.095C100.33,65.29,98.012,59.922,95.727,56.11z M77.582,69h11.677C89.259,69,89.259,75,77.582,69 z"/> <path d="M53.943,97.604c-0.348-0.031-0.705-0.008-1.062-0.028c-0.212-0.012-0.425-0.001-0.633-0.02 c-3.854-0.352-6.887-1.923-8.909-4.354c-2.018-2.434-3.053-5.744-2.744-9.682l0.018-0.214c0.262-2.885,1.129-5.415,2.495-7.631 c1.367-2.215,3.437-3.863,5.531-5.702c7.384-6.483,14.57-10.075,21.95-13.905c4.245-2.203,8.488-4.594,12.651-7.22 c0.93-0.589,1.652-1.372,2.303-2.16c0.65-0.79,1.234-1.593,1.838-2.262c0,0-8.906,4.272-12.152,5.812 c-9.81,4.656-19.593,9.548-28.099,16.587c-3.033,2.512-5.808,5.679-7.739,9.131c-1.279,2.286-2.037,4.649-2.252,7.027 c-0.347,3.803,0.713,7.618,3.108,11.164c1.28,1.9,2.797,3.31,4.487,4.276c1.689,0.967,3.541,1.487,5.471,1.66 c1.797,0.162,3.675-0.072,5.585-0.411l7.056-1.355l-7.128-0.644C55.143,97.622,54.545,97.659,53.943,97.604z"/> <path d="M49.823,71.043c0.97,0.317,1.875,0.565,2.726,0.76c0.576-0.435,1.197-0.869,1.86-1.301 C51.934,70.79,49.823,71.043,49.823,71.043z" fill="#FFFFFF"/>
         </g> 
  
  　　</svg> 
  
  </div>

  上面的示例将<svg>放在一个<div>元素中，只是用来说明SVG图像可以通过<svg>元素嵌入到HTML页面中。其实<svg>元素可以不放在一个<div>元素中。

  使用<svg>元素可以直接在HTML页面中嵌入SVG，而不是像前面几种方式那样，将SVG图像文件嵌入到页面当中。你可以设置width和height值，用来控制<svg>元素的大小，从而控制SVG图像的宽度和高度。

  使用<svg>元素嵌入SVG图像，还可以通过CSS给其定义一些样式，实现一些样式效果

• 使用<embed>元素来嵌入SVG图像

• <embed src="http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg" width="300" height="220" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

• 使用<object>元素来嵌入SVG图像　　

　<object data="http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg" width="300" height="200" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

 

 

 

 

转载自: http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html ? w3cplus.com