介绍一些写好SVG的小技巧：

1. How to Scale SVG - Amelia Bellay@codepen.io

   • 讲述如何控制SVG的缩放

   • SVG的几种用法：放在 <img> 元素中；放到 <object> | <iframe> 元素中；内联直接使用 <svg>

   • viewBox 特性的重要性

     • 定义图片的宽高比（aspect ratio）
     • 它定义了如何缩放SVG内使用的所有长度和坐标，以适应可用的总空间
     • 它定义了SVG用户坐标系统的原点

   • preserveAspectRatio 特性：

     • 它只有定义了 viewBox 特性，这个特性才能生效
     • 它描述当viewBox的宽高比和svg viewport的宽高比不一致时，图片应该如何进行缩放😎
     • 它类似于CSS中的 background-size + background-postion
     • preserveAspectRatio="none" 允许SVG像JPG,PNG这样栅格图片一样去缩放拉伸

   • 如果只给svg提供 viewBox & width & height 特性，而不提供 preserveAspectRatio 属性，它默认是 xMidYMid meet，即图片会居中，并且不会扭曲，然后根据 width & height 进行缩放📄

   • 🌰 将定义了 viewBox 的svg放到 <img src="xxx.svg"> 中，图片会根据viewBox中定义的宽高比进行自动缩放

   • 🌰 将svg用作背景图时，为了图片根据容器宽度变化，可以使用 padding-bottom 的方式保持宽高比，以使高度根据高度来适配🎉

     • padding hack的用法保持宽高比 - @alistapart

     • svg as background - @codepen

   • 🌰 内联的方式使用 <svg viewBox="">，只需要设置 width或者height 中的一个特性，没有设置的默认为 auto，这样，它便会自适应，如果 width 和 height 都没有设置，这默认为填充整个容器宽度

     • Auto-Scaling Inline SVG - @codepen

   • 🌰 如果想要像JPG,PNG这样栅格图片一样去缩放拉伸，可以同时设置 viewBox + preserveAspectRatio="none"

     • Flex-Scaling SVG Using Percentages - @codepen

   • 🌰🚀 使用嵌套 <svg> 的方式，同时包含多个 <svg>，然后定义不同的 viewBox & preserveAspectRatio 得到不同的效果，使得有的svg拉伸扭曲，有的保持其宽高比

     • Flex-Scaling SVG Using Nested SVGs - @codepen

2023年01月11日18:55:25