Skip to content

Instantly share code, notes, and snippets.

@d-baker

d-baker/svg-bug.md

Last active August 29, 2015 14:13
Show Gist options
  • Save d-baker/5aaaa363b9309909bd8e to your computer and use it in GitHub Desktop.
Save d-baker/5aaaa363b9309909bd8e to your computer and use it in GitHub Desktop.
Download ZIP
Safari SVG <image> bug solution (kinda)
Raw
svg-bug.md
  • The <image> tag in SVG is used to include a bitmap image inside an SVG.
  • Safari (along with some other lesser-known browsers: Luakit, DWB, Rekonq, Konqueror) won't render <image> tags in an SVG unless the SVG is contained in a <object> tag.
  • If you want your <object> to be a clickable link, you need to add object { pointer-events: none} to your CSS.
  • Unfortunately, this doesn't appear to always work. I had 2 <object>s on one page that had similar CSS rules, and only one of them became clickable when I added the object { pointer-events: none} rule. There is a documented bug in webkit from 2011 that seems relevant to this problem, but it's a mystery to me.
  • The solution in my case was to convert the bitmap to a vector path. You can do this in Inkscape with Path -> Trace bitmap. As long as you're not trying to include photographs in the middle of your SVG (why on earth would you want to do that!!) then there probably isn't anything wrong with this approach.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment