我尝试过的

Question

我正在寻找有关使用SVG图像和图标的建议。

我尝试过的

如果我使用的是PNG图标，则CSS类似于：

elem:after {background: url('icon.png'); ...}

我尝试过相同的方式

elem:after {background: url('icon.svg'); ...}

但这不是我想要的。该解决方案失去了SVG图标的优势（它们很小且模糊，模糊）。

我有什么

我已经使用Icomoon应用程序在线生成了此代码。

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="icon-love" viewBox="0 0 33 32">
            <title>love</title>
            <path d="M32.916 15.597c0.604-0.66 ..."></path>
        </symbol> 
        <symbol id="icon-shop" viewBox="0 0 34 32">
            <title>shop</title>
            <path d="M17.148 27.977c-..."></path>
        </symbol>
     </defs>
</svg>

<svg class="icon icon-shop">
    <use xlink:href="#icon-shop"></use>
</svg>

我的问题

将图标放入HTML标记而不是将其放入CSS在语义上是否正确？
在整个网站上，大约有60个图标，任何唯一的图标都重复多次。上面生成的标记大约有50kB。
我可以将所有图标放入通用布局模板并将其全部加载到整个网站中，还是只包含我在页面中使用的图标？

我在这里找到了How to change color of SVG image using CSS (jQuery SVG image replacement)?（3年前），但不知道这是正确的方法。
如何正确缓存SVG？当我像上面写的那样使用它时可以吗？

我读了很多文章，但不确定如何做到最好。

感谢您的咨询。

如何正确使用SVG图标/最佳做法

我尝试过的

我有什么

我的问题

0 个答案: