0

I made an svg in Illustrator, but now I want to use it in a website/app but it's a huge size (around 10 MB) how can I decrease the size of it? My illustrator file is pretty big but that because I have some tracing elements underneath. The file also has a big artboard, but when I save should I delete my tracing elements, and decrease the artboard size?

Improve this question
2
  • Have you tried compressing the svg? But yes svg is super duper verbose so expect it to grow like wildfire.
    – joojaa
    Aug 31, 2014 at 20:11
  • Can you give more information about the graphic? It may make more sense to export it as PNG if it is that finely detailed. SVG is best for simple vector drawings with solid colors or smooth gradients.
    – AmeliaBR
    Sep 1, 2014 at 3:27

2 Answers 2

Reset to default
2

Yes, you should delete any extra elements before saving out your svg. Also how complex is your map? Svg's typically perform best without gradients, clipping masks, or additional effects like drop shadows. If you need to keep the detail why not just do a save for web from Illustrator as a png?

Improve this answer
2
  • So my size is now 448KB. Big step down from 10 MB. I don't have any clipping masks (I think), and no crazy effects. Super basic. Is there anyway to save it in illustrator to be as basic as possible?
    – EGHDK
    Sep 1, 2014 at 22:36
  • I'd say with a file of 448kb you may be as low as you can get it. If you want to strip the file to the most basic settings you may want to try saving down to Illustrator 3 (not "cs" 3) OR an older version of a .eps file type. Make sure you hit save as, and when choosing the version, then select the oldest one possible. You may get a warning saying some advanced effects or gradients may be flattened and this is fine. Give that a shot. Otherwise I think you should be all set.
    – Eddie Adolf
    Sep 2, 2014 at 20:19
1

I've ran into this several times with Illustrator CC-2014 and I will use the below as an example:

Just a few shapes, colors, and guides.

enter image description here

File -> Save As select SVG (svg)

enter image description here

After selecting SVG an option box will appear so select SVG Code...:

enter image description here

The code will either output in your default code editor or open a .txt file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 713 956" enable-background="new 0 0 713 956" xml:space="preserve">
<g id="Layer_1">
    <path fill="#F1F2F2" stroke="#000000" stroke-miterlimit="10" d="M472.5,359.6c-82,0-148.5-66.5-148.5-148.5
        c0-16.7,2.8-32.8,7.9-47.9c-9.4-1.1-18.9-1.6-28.5-1.6c-138.9,0-251.5,112.6-251.5,251.5s112.6,251.5,251.5,251.5
        s251.5-112.6,251.5-251.5c0-25.1-3.7-49.3-10.5-72.2C523.1,352.9,498.6,359.6,472.5,359.6z"/>
</g>
<g id="Layer_2">
    <circle fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" cx="488.3" cy="638.9" r="148.5"/>
</g>
<g id="Layer_3">
</g>
</svg>

If you notice from the above code I have three layers and they are Layer_1, Layer_2 and Layer_3. In this instance it didn't output the guides but sometimes I have seen it as id="guide" if I recall.

I would trim the code down to this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 713 956" enable-background="new 0 0 713 956" xml:space="preserve">
<g id="Layer_1">
    <path fill="#F1F2F2" stroke="#000000" stroke-miterlimit="10" d="M472.5,359.6c-82,0-148.5-66.5-148.5-148.5
        c0-16.7,2.8-32.8,7.9-47.9c-9.4-1.1-18.9-1.6-28.5-1.6c-138.9,0-251.5,112.6-251.5,251.5s112.6,251.5,251.5,251.5
        s251.5-112.6,251.5-251.5c0-25.1-3.7-49.3-10.5-72.2C523.1,352.9,498.6,359.6,472.5,359.6z"/>
</g>
<g id="Layer_2">
    <circle fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" cx="488.3" cy="638.9" r="148.5"/>
</g>
</svg>

and the above SVG can be called as an image in your files.

That is one way to do it but I've learned and have been testing another. In my XHTML files I trim it down all the way to the SVG itself like so:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path fill="#F1F2F2" stroke="#000000" stroke-miterlimit="10" d="M472.5,359.6c-82,0-148.5-66.5-148.5-148.5
        c0-16.7,2.8-32.8,7.9-47.9c-9.4-1.1-18.9-1.6-28.5-1.6c-138.9,0-251.5,112.6-251.5,251.5s112.6,251.5,251.5,251.5
        s251.5-112.6,251.5-251.5c0-25.1-3.7-49.3-10.5-72.2C523.1,352.9,498.6,359.6,472.5,359.6z"/>
    <circle fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" cx="488.3" cy="638.9" r="148.5"/>
</svg>

BUT be aware after some testing I have found that the <svg> tag should be enclosed inside a <div>. Doing it this way saves down on the code and I can easily animate it this way.

Result in Chrome:

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.