Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

SVG Files (Help)

Discussion in 'Website Design Forum:' started by Stationery Direct, Jul 3, 2015.

  1. Stationery Direct

    Stationery Direct Administrator Staff Member

    I have never worked with .svg files before and I'm not that good with Illustrator, so just after some advice please.

    So I currently have a few images that are .svg files, I have opened them up in illustrator, all good, literally made a basic change such as a change of text colour, exported back out as .svg, re-uploaded to my server and the images are displaying loads smaller than the original, where am I going wrong?
  2. Paul Murray

    Paul Murray Moderator Staff Member

    Open the SVG up in a text editor and check the viewbox dimensions match those of your actual SVG.

    For example width="100px" height="100px" viewBox="0 0 100 100"

    Sometimes the viewBox is larger after editing which effectively scales down the shapes inside.

    When you're using SVGs you should include a fall back to a transparent PNG for browsers that don't support them. The easiest way to do this is to add the SVG to the DOM like you would any other image, but add an 'onerror' attribute like so;

    <img src="img/icon.svg" onerror="this.src='img/icon.png' "

    There are other ways to check for errors and serve fallbacks, such as using Modernizr.js, but this is the down and dirty way.
    Last edited: Jul 3, 2015
    Stationery Direct likes this.

Share This Page