剥离SVG代码

时间:2014-05-12 14:58:29

标签: css html5 svg

我已经从coreldraw创建了SVG代码,并希望将其内联到我的HTML5文档中并进行一些查询。

  1. 现在SVG的普及程度如何?有关向后兼容性的任何建议吗?

  2. 我已经从svg中取出了样式数据并将其放入我的CSS中,我想这不是问题 - 或者是它?我还添加了一个悬停规则......

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

    1. 我可以删除以下任何不需要的数据吗? (但我希望它能够起作用并且看起来一样)
    2. <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. 非常欢迎任何其他可能有用的提示/提示。

1 个答案:

答案 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并将其像图像一样保存。但是,我知道你为什么要在线描述它,因为你正在使用一些悬停。