1. 5
  1.  

  2. 4

    I must say that I think there is a much better solution available here. Instead of dumping the full image in each time, use an SVG <use> tag. You can even define the SVG externally (for most browsers, and there’s even a polyfill for IE). You get to keep all your styling (assuming you’ve decorated your svg’s components usefully), and you dramatically reduce over-the-wire bits. You may still be sending more than with this hack, but it’s much cleaner and more flexible.

    And, not to nitpick, but if your SVG is just a circle-enclosed exclam, it can be of much smaller size than that SVG is if you leverage things other than SVG’s <path>. Some things are much more compact when defined with <path>, but not all. And not in this case.

    1. 2

      Cool, i didn’t know you could use an external source for SVGs with use. How would I got about reducing it? I’m not the original SVG creator. Is there some kind of optimizer I could use?

      1. 4

        Sure. SVG have a large number of drawing directives. Programs that export to SVG tend to prefer <path> because it can do any possible shape that any other drawing directive can produce, so it is easier to programmatically output. Having said that, for anything like this, it is almost certainly simpler to use some of the other directives.

        For example, here is the original you started with:

        <?xml version="1.0" encoding="UTF-8"?>
        <svg fill="#fff" class="issue-icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path d="m8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm0 14c-3.309 0-6-2.692-6-6s2.691-6 6-6c3.307 0 6 2.692 6 6s-2.693 6-6 6z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M8.5,3h-1C7.224,3,7,3.224,7,3.5v6C7,9.776,7.224,10,7.5,10h1 C8.776,10,9,9.776,9,9.5v-6C9,3.224,8.776,3,8.5,3z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M8.5,11h-1C7.224,11,7,11.224,7,11.5v1C7,12.776,7.224,13,7.5,13h1 C8.776,13,9,12.776,9,12.5v-1C9,11.224,8.776,11,8.5,11z" clip-rule="evenodd" fill-rule="evenodd"/>
        </svg>
        

        Here is a reduced version:

        <?xml version="1.0" encoding="UTF-8"?>
        <svg fill="currentColor" class="issue-icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <circle r="7" cx="8" cy="8" stroke="currentColor" stroke-width="2" fill="none" />
          <rect width="2" height="2" x="7" y="11" rx="0.5" />
          <rect width="2" height="7" x="7" y="3" rx="0.5" />
        </svg>
        

        The above is virtually identical to the one you are currently using (and can have its full color controlled with the following style):

        .issue-icon {
            color: #000;
        }
        

        This is a reduction in size from 678 bytes to 350 bytes. That change alone would have cut down on your page size pretty dramatically.

        I am not aware of a minifier (as I said, most programs use <path> because it’s so much easier to programmatically generate), but it was not difficult for me (not a web-developer) to figure out this translation by-hand.

        1. 2

          Thanks!