This afternoon I was replacing a .png image with an .svg. Working in my local development environment, I started with a simple `<img src=”myicon.svg”>`. It looked like a broken link. Next I went to CSS-Tricks and used the first fall-back technique he lists:

`<svg width=”96″ height=”96″> <image xlink:href=”svg.svg” src=”svg.png” width=”96″ height=”96″ /> </svg>`

This also resulted in a broken link.

I banged my head against the wall for at least an hour, checking the path, swapping .svg for .png. Everything I could think of. Then I looked at the actual svg file.

`<?xml version=”1.0″ encoding=”utf-8″?>

<!– Generator: Adobe Illustrator 17.1.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″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”

viewBox=”0 0 200 200″ enable-background=”new 0 0 200 200″ xml:space=”preserve”>

<path fill=”#FFFFFF” d=”M0,0v200h200V0H0z M161.757,70.931c0.062,0.911,0.096,2.276,0.096,4.096c0,8.453-1.234,16.888-3.705,25.307 …`

A few links and that xmlns:xlink reference and I started wondering, “is it my dev environment?” Sure enough, once I pushed the code to a server the image showed up.

Edit: After talking with a co-worker I realized I was wrong. No, there’s no magic linking .svg’s the web over DNS or something. It was a permission’s issue. When I pushed the file through Git the permissions were set to 755, or whatever it needed to be. But on my local machine, for whatever reason the reading permissions were locked down for apache. Light dawns over Marble Head.