【SVG入门知识】_svg 默认大小是 default: '1.5em'是按照原图的-优快云博客

本文介绍了SVG（可缩放矢量图）的基本概念、XML语法、标签结构以及常用形状元素如矩形、圆形、椭圆等的使用方法。特别提到了如何通过SVG替代canvas进行不失真的放大渲染，并展示了自定义形状、图案和文本的运用实例。

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

前言：
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图。顾名思义，这种格式的图像是不会失真的，它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。所以很多渲染图像的都会基于SVG去渲染，大家熟悉的像echarts，它默认是基于canvas进行渲染的，但是我们可以选择按照SVG进行渲染，这样的图像在放大的时候就不会失真。废话不多说，且听下面讲解。
SVG标签

SVG 代码都放在顶层标签

<svg width="100%" height="100%">
   <circle id="circle" cx="50" cy="50" r="50" />
</svg>

width 和 height 属性可设置此 SVG 文档的宽度和高度。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。如果想对SVG图像进行裁剪，就要指定viewBox属性。属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。

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

矩形
圆形
椭圆
线
折线
多边形
路径
矩形

<svg width="300" height="180">
   <rect width="300" height="100" x="0" y="0" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);stroke: #70d5dd" />
</svg>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
stroke-width 属性定义矩形边框的宽度
stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置
y 属性定义矩形的顶端位置
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
圆形

<svg width="300" height="180">
   <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于