SVG: 可伸缩的矢量图形_svg 拉伸-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_64707449/article/details/127091879

本文介绍了SVG（可缩放矢量图形）相较于GIF、JPEG等格式的优势，包括易编辑性、高分辨率打印能力及与JavaScript的良好兼容性等，并通过一个具体的SVG图形实例展示了其在实际应用中的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：SVG是一种用于描述图形的XML语法。

与其他图像格式(如：GIF,JPEG,PNG)相比，使用 SVG 的优势在于：

● SVG 可被非常多的工具读取和修改（比如记事本）

● SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

● SVG 是可伸缩的

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

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

● SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

● SVG 可以与 JavaScript 技术一起运行

● SVG 是开放的标准

● SVG 文件是纯粹的 XML

一个简单的SVG文件如下所示：

// SVG图形
<svg xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 1100 1100>    // 图形的坐标系
   <defs>     // 设置后面要用到的一些定义
     <linearGradient id="fade">    // 将渐变色命名为"fade"
       <stop offset="0" stop-color="#008"/>   // 颜色设置为深蓝色
       <stop offset="100%" stop-color="#ccf"/>   // 渐变到浅蓝 
     </linearGradient> 
   </defs>
// 画一个具有宽的黑色边框并且渐变色为填充色的矩形
   <rect x="150" y="300" width="800" height="300"
         stroke="black" stroke-width="25" fill="url(#fade)">
</svg>