我已经从coreldraw创建了SVG代码,并希望将其内联到我的HTML5文档中并进行一些查询。
现在SVG的普及程度如何?有关向后兼容性的任何建议吗?
我已经从svg中取出了样式数据并将其放入我的CSS中,我想这不是问题 - 或者是它?我还添加了一个悬停规则......
.Borderline {stroke:#0099FF;stroke-width:7.45541;stroke-linejoin:round}
.BorderFill1 {fill:#71C6FF}
.BorderFill2 {fill:#CBEAFF}
.BorderFill1:hover {fill: green; }
<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>
答案 0 :(得分:2)
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导出的矢量艺术。你可能会认为通过一个缩小器来运行它,但是手动调整几乎肯定比它的价值更多。
这是谷歌给我的第一个缩小器: 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并将其像图像一样保存。但是,我知道你为什么要在线描述它,因为你正在使用一些悬停。