2



I'm looking for an advice about work with SVG images, respectively icons.

What I've tried

If I'm using PNG icons, the CSS is like:

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

I've tried the same way

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

but it isn't what I'm looking for. This solution lose advantages of SVG icons (they're small and blured, fuzzy).


What I have

I've generated this code online using Icomoon app.

<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>

My question

  1. Is it semantically correct to put icons into HTML markup, instead of putting them into CSS?

  2. Across whole website there is about 60 icons, any unique, any are repeated more times. Generated markup above has about 50kB.
    Can I put all icons into general layout template and load them all in whole website, or include just icons I use in the page?

    Here I've found How to change color of SVG image using CSS (jQuery SVG image replacement)? (3 years ago), but don't know if it's the right way.

  3. How to cache SVG properly? Is it posible when I use it like I'm writing above?

I read many articles, but not definitely sure how to do that best way.

Thanks for advice.

Community
  • 1
  • 1
  • 1
    Did you read these ones https://www.sarasoueidan.com/tags/svg/ – Hamza Erbay Nov 01 '18 at 17:49
  • 1
    @HamzaErbay: thanks for comment! I've read many articles so far (and I have working icons, but still looking best practice). Your link looks fine, but I've found there just 1 link which can be valid for me (https://www.sarasoueidan.com/blog/css-vs-svg-the-final-roundup/), other headlines solve anything else. I'll read that. But if anybody has real experience, I've asked 3 clear questions with response for the lines each max. Maybe someone answer them. Thanks once more again for your comment. –  Nov 01 '18 at 17:56
  • I'm trying to make sure about best practices too :) Currently, I'm using the icomoon and comparing the performance of load time with these plugins. https://github.com/kisenka/svg-sprite-loader https://github.com/mrsum/webpack-svgstore-plugin – Hamza Erbay Nov 01 '18 at 18:05

0 Answers0