Home/ Questions/Q 9016897
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T04:07:29+00:00

As you know you can compress several CSS files to one (or JS files).

  • 0

As you know you can compress several CSS files to one (or JS files). I was wondering if it’s possible to compress several SVG to one external file, so the server makes just one request

Basically SVG files are just XML text so it’s theoretically possible, however there is a catch how to render several of those images on different places

I’m just wondering

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thx for answer but in the end I ended up doing it like this:

    In my case I wanted to use my SVG as a background image of div tag so I don’t needed to precompile SVGs, I just put the compress format directly to background-image: url('here')

    so for multiple SVG background:

    width: 600px:
height: 400px:
background-image: url('data:image/svg+xml ...first svg '), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwb2x5bGluZSBpZD0ic3ZnXzMiIHBvaW50cz0iNTM4LjUsMzMzLjU2OTU2NDgxOTMzNTk0IDMyMi4yNSwyNzguMjg0NzgyNDA5NjY3OTcgMTA2LDIyMyAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiBmaWxsPSJub25lIi8+CiAgPGVsbGlwc2UgZmlsbD0iI0ZGMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjUiIGN4PSIzNDMiIGN5PSIxNzAiIGlkPSJzdmdfMSIgcng9IjE0MCIgcnk9IjEwNSIvPgogPC9nPgo8L3N2Zz4=')

    check it here: http://codepen.io/equivalent/full/ymefJ

    raw svg format:

    <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <polyline fill="none" stroke-width="5" stroke="#000000" points="538.5,333.56956481933594 322.25,278.28478240966797 106,223 " id="svg_3"/>
  <ellipse transform="translate(-402 -120)" ry="105" rx="140" id="svg_1" cy="290" cx="745" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>

    editor: http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html

    I believe that the link in Tom Harrison answer is on to something and from what I saw it might work, but I didn’t try it myself. So if you want to truly precompile SVG with assets pipeline I encourage you to use that tactic.

    • 0