SVG基础
撰写时间：2024-07-10
修订时间：2026-01-28
SVG是一种以声明方式来绘制图形的技术。
本文所涉及的SVG为SVG 2.0。
最简单的SVG
SVG的根元素为svg。rect元素绘制一个矩形，并为其指定填充颜色及描边颜色。
SVG坐标系的原点位于左上角，X轴正轴向右，Y轴正轴向下。
可将svg放在HTML文件中进行渲染。上面的SVGEditor即利用了此特性。
SVG也可以独立的文件格式出现，其文件扩展名为.svg。下面是其作为单独文件存在时的格式。
在浏览器中查看独立的simple.svg文件。对于SVG文件，在浏览器中可以很方便地对其按右键下载。
编写简介
title为标题，desc为整个SVG的简介。在渲染时均不会显示。如果SVG文件较大、内容较多时，这些信息对快速摸清SVG的主要内容就很有帮助。
svg的大小
分为单独的.svg文件，以及寄宿在HTML文件中两种情况。
单独的SVG文件
在单独的.svg文件中，各浏览器默认应用以下设置：
因此，其尺寸能随视口的变化而变化。
这些特性，符合SVG规范。
寄宿在HTML文件中
各浏览器的实现
当svg寄宿在HTML时，则各浏览器按其默认的300px × 150px予以渲染，且溢出区域自动隐藏。
但SVG规范作出了更为详细的规定。
SVG规范的规定
第一种情况：如果svg是最顶层的元素，则width及height的值均设为100%，否则，其值均为auto。
何为最顶层的元素？当body中只有一个svg时算不算？点击svg-in-html.html看效果。
可以看到，width的值为300px，height的值为150px。浏览器说，不算。
而top-level-element.html什么都没有，只有一个svg元素，算不算？浏览器说，这也不算。实际上，浏览器自动将svg添加到body的下面。因此效果与上面完全一样。
因此，何为最顶层元素，SVG规范规定得不明确。
第二种情况：当未指定任何指宽高度的属性时，width的值为300px，height的值为150px：
注，上面的live-editor通过设定no-default-style属性，因此未使用任何CSS设置，只在CSS
面板中为svg设置了一个边框以看清其大小。
第三种情况：当用户仅指定了width及height的值时，使用指定值。
第四种情况：如果用户指定了viewBox，此时又分为：
- 如果用户同时指定了width及height属性值，则使用指定的width及height属性值，并按指定的viewBox来计算svg的内在比例。
svg { border: 1px solid black; } - 如果用户未指定width及height的值，所缺失的属性值为auto。下面显示其3种组合的情况。
- 两个均未指定。
svg { border: 1px solid black; } width的auto被解析为100%，从而宽度能铺满整个输出面板。至于高度，按viewBox所指定的宽高比，以及实际的宽度，按比例算出其高度值。
- 仅指定width值。
svg { border: 1px solid black; } 取用所指定的width值，根据viewBox所指定的宽高比，按比例算出其高度值。
- 仅指定height值。
svg { border: 1px solid black; } 取用所指定的height值，根据viewBox所指定的宽高比，按比例算出其宽度值。
- 两个均未指定。
本站 svg-editor 的实现
为模拟独立HTML环境下的效果，本站的svg-editor使用了以下的初始样式：
故此svg-editor中的svg在默认情况下可自动铺满整个视口。
可通过width及height属性为svg设定宽高值。
svg-editor考虑了所有可能性，具体参见SVGEditor Test。
呈现属性值与CSS样式的优先级
SVG的各元素有一些presentation attributes （呈现属性），如fill, stroke等，均可同样通过CSS来设置其值。
在SVG 1.0规范中，呈现属性的优先级更高；而在SVG 2.0及CSS 3规范中明确规定，这些呈现属性的优先级较低。因此，在SVG 2.0中，若有相对应的CSS设置，则优先应用CSS设置值。
对此，各浏览器支持不一致。Chrome, Safari遵从了SVG 2.0的要求，但Firefox仅遵从SVG 1.0的要求。因此，SVG 2.0明确指出，在后续版本中，新出现的属性将不再有呈现属性；并明确提出建议，应优先使用CSS来设置其值，而不是直接设置SVG元素的呈现属性值。