也许使用 SVG 的最佳方式是“内联 SVG” - 也就是说，将 SVG 代码直接放入 HTML 中。它效果很好！
查看 Pen gpcDi by Chris Coyier (@chriscoyier) on CodePen.
本系列的很多内容都将是关于使用内联 SVG 可以实现的所有很棒的功能，所以我想非常清楚地解释一下它是什么以及它是如何工作的。
如果你担心在 HTML 中包含所有这些代码，请知道
如果我想调整内联 svg 的大小但 **不** 保持纵横比怎么办？可以使用 position: absolute 拉伸内联 svg 吗？
position: absolute
嗨 Caroline，
是的，可以！玩玩这个 preserveAspectRatio 测试器 你就会明白了。
这是 <svg> 本身的属性。
<svg>
嗨，当我尝试获取 svg 代码以用作内联 html 时，它很大，这是正常的吗？我希望它看起来像你的代码，但它太大了。它不是一个很复杂的图像，只是一行带有阴影的文本。我做错了什么？
是的，这绝对是正常的。你需要在 SVG 代码中明确定义 SVG 的宽度和高度（例如 ）或在 CSS 中隐式定义（例如 svg { height: 100px; width: 100px; }）。
svg { height: 100px; width: 100px; }
您好，当我使用 svgo 或在线使用 nano 在 sketch 中压缩 svg 文件时，我无法再设置 svg 元素的样式，是否有特定的设置需要设置为压缩插件？
嗨 Matthias！你可能想在代码编辑器中打开 SVG 文件，看看是否有任何样式被内联了 - 如果有，那就去掉它们，这样你就可以在样式表中修改它们了。:)
感谢这篇帖子 Chris！我一直想知道 SVG 的最佳实践是什么。
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
Copy and paste this code: micuno *
Leave this field empty
Δ
如果我想调整内联 svg 的大小但 **不** 保持纵横比怎么办？可以使用
position: absolute拉伸内联 svg 吗？嗨 Caroline，
是的，可以！玩玩这个 preserveAspectRatio 测试器 你就会明白了。
这是
<svg>本身的属性。嗨，当我尝试获取 svg 代码以用作内联 html 时，它很大，这是正常的吗？我希望它看起来像你的代码，但它太大了。它不是一个很复杂的图像，只是一行带有阴影的文本。我做错了什么？
是的，这绝对是正常的。你需要在 SVG 代码中明确定义 SVG 的宽度和高度（例如
）或在 CSS 中隐式定义（例如svg { height: 100px; width: 100px; }）。您好，当我使用 svgo 或在线使用 nano 在 sketch 中压缩 svg 文件时，我无法再设置 svg 元素的样式，是否有特定的设置需要设置为压缩插件？
嗨 Matthias！你可能想在代码编辑器中打开 SVG 文件，看看是否有任何样式被内联了 - 如果有，那就去掉它们，这样你就可以在样式表中修改它们了。:)
感谢这篇帖子 Chris！我一直想知道 SVG 的最佳实践是什么。