Grow your CSS skills. Land your dream job.

[Solved] SVG + CSS Issues

  • # February 26, 2013 at 3:14 am

    Hi everyone,

    I have been adding svg images to div tags with the background property in css (example: the treehouse logo on this website). I am having a strange issue I don’t quite understand. The svg file loads just fine in my local host, but when I upload the files into my server and preview the site remotely, the svg image doesn’t load and the browser doesn’t recognize it, as if the file wasn’t there. Am I forgetting to add something to the page so it loads properly?

    Help on this would be super awesome.

    Thanks!

    # February 26, 2013 at 4:52 am

    What are you putting as the URL to the image? We need the code.

    # February 27, 2013 at 12:40 pm

    Hi sorry I should’ve added the example from the start. Please refer to http://codepen.io/anon/pen/cgobp to see the issue I’m running into.

    # February 27, 2013 at 1:34 pm

    Simple answer….your svg image isn’t an image…it’s an xml file. with an SVG extension..I think that makes a difference but I’m no expert.

    http://www.miguelzuleta.com/temp/1/ii/square.svg

    http://codepen.io/Paulie-D/pen/Knejp

    # February 27, 2013 at 1:48 pm

    Paulie’s example gets served with header Content-Type:image/svg+xml

    Yours gets served with header Content-Type:text/plain

    I think that could be the problem (not sure), Google for how to change the content-type for svg in the response header (because I don’t know how, probably some .htaccess setting if you’re using Apache).

    # March 1, 2013 at 2:00 am

    Paulie and Croco,

    thanks for the advice I ended up learning new tricks from it… it still doesn’t work tho… strange… I’ve tried using:

    “AddType image/svg+xml svg
    AddType image/svg+xml svgz”

    &

    “Content-Type: image/svg+xml”

    as an .htaccess file in the directory where my .svg files live, but nothing…

    I’m running out of ideas. Would you think it is my server’s problem?

    # March 1, 2013 at 3:55 am

    http://www.miguelzuleta.com/temp/1/ii/square.svg

    I’m getting an error. Do you have access to your server’s error log?

    I’ve Googled some and I think you only need `AddType image/svg+xml svg` (and svgz extension if you need it)

    # March 5, 2013 at 2:06 am

    Ok it works now! I don’t quite understand the logic of the solution tho… In order for it to work, I need to add the .htaccess files with the AddType lines in the same directory where the svg images live. That in return will throw that 500 server error that CrocoDillon mentioned. If I reload the URL, delete the .htaccess file, and reload the URL one more time, it will work.

    Check it out: http://www.miguelzuleta.com/temp/1/ii/square.svg
    There isn’t an error anymore, and it is loading as an image instead of svg code.

    Awesome. Thank you guys for your help!

    # March 5, 2013 at 4:06 pm

    That’s weird, always thought .htaccess gets inherited by sub directories. Anyway it works here too, gj!

    # February 18, 2014 at 11:00 pm

    I know this is way late, but I had the same issue. What chuletademarrano said works except I didn’t have to delete the .htaccess file. I just forgot to add the “.” before “htaccess” file name, so it wasn’t working. I added the “.” and it FINALLY worked.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".