剥离 SVG 代码

Question

我已经从 coreldraw 创建了 SVG 代码，并希望将其内嵌到我的 HTML5 文档中并有几个查询。

1. SVG 现在有多普遍？关于向后兼容性有什么建议吗？

2. 我已从 svg 中取出样式数据并将其放入我的 css 中，我想这不是问题 - 是吗？我还添加了悬停规则...

.Borderline {stroke:#0099FF;stroke-width:7.45541;stroke-linejoin:round} .BorderFill1 {fill:#71C6FF} .BorderFill2 {fill:#CBEAFF} .BorderFill1:hover {fill: green; }

1. 我可以删除以下任何不需要的数据吗？ （但我希望它能够工作并且看起来一样）

<svg xmlns="http://www.w3.org/2000/svg" class="myimgleft" xml:space="preserve" width="100px" height="105px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 92 97" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Layer_x0020_1"> <metadata id="CorelCorpID_0Corel-Layer"/> <path class="BorderFill1 Borderline" d="M55 51c10,0 18,0 24,0 4,-5 9,-10 9,-15 0,-6 0,-22 0,-32l-16 14c-5,-4 -8,-6 -17,-14l0 47z"/> <path class="BorderFill2 Borderline" d="M79 51c-5,-1 -41,0 -47,0l0 -14c-8,8 -25,25 -28,28l28 28 0 -13c7,0 11,1 17,-2 6,-2 23,-21 30,-27z"/> </g> </svg>

1. 非常欢迎任何其他可能有用的提示/技巧。

Answer 1

1 MDN 保留了每个元素的准确兼容性列表。这是 SVG 的列表：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg

Feature Chrome Firefox (Gecko) IE Opera Safari Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4

2 将样式保留在您的 SVG 中 - 以后可以更轻松地替换为其他 SVG 图像。您希望能够快速更新您的 svg。这更多是一个偏好问题。

3 我不会养成手动调整从 CorelDraw 导出的矢量图的习惯。你可能会想通过一个缩小器来运行它，但手动调整几乎肯定比它的价值更多。

这是 Google 给我的第一个缩小器： http://petercollingridge.appspot.com/svg-optimiser 对于不内联的情况，您可以试一试 .svgz（压缩 svg），这将使其显着变小：https://graphicdesign.stackexchange.com/questions/24797/when-should-i-use-svg-or-svgz-for-my-web-graphics

4 嗯，其他提示 - 非常适合在您的网站上使用矢量艺术。太多的 web 开发者/设计师采取了在光栅中做所有事情的捷径。虽然这可以为您提供一个漂亮的演示图像，但从长远来看，它确实会伤害您的网站。随着无处不在的平板电脑 + 手机，捏 + 缩放无处不在，您的图像需要很好地缩放。

就个人而言，我从不喜欢内联 svg 的想法——我一直更喜欢将其保存为 .svg 并像图像一样对其进行 src-ing。不过，我明白你为什么要内联它，因为你使用了一些悬停。