If you're interested in functional programming, you might also want to checkout my second blog which i'm actively working on!!

Tuesday, October 16, 2012

Using SVG in modern browsers

SVG has come a long way and I can still clearly remember the days one had to install Adobe flash to enable SVG in the browser. I was pretty excited about this technology as it enabled me to dynamically generate images from the domain model. Currently you can even use the html5 canvas tag. But back to SVG. We switched from using .eps files not so long ago to SVG. You can't render EPS in the browser so that's one big drawback. And the good news is recent browsers (IE9, chrome, firefox, ..) natively support SVG. Forget about using the old school <object> and <data> tags to embed SVG ;-) 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />     
    <title>SVG test </title>
  </head>
  <body>
    <div>
      <div>embedding SVG with img tag</div>
      <div><img src="test.svg"/></div>
    <div>
    <div>
      <div>embedding inline SVG</div>
      <div>
        <svg  xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40mm" height="28.63mm" viewBox="0 0 90.00 81.14">
          <rect x="1" y="1" width="60" height="60" fill="none" stroke="red" stroke-width="2"/>
          <circle cx="40" cy="44" r="30" fill="none" stroke="yellow" stroke-width="10"  />
          <text x="24" y="48">SVG</text>
        </svg>
      </div> 
  </body>    
</html>

test.svg 
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40mm" height="28.63mm" viewBox="0 0 90.00 81.14">
  <rect x="1" y="1" width="60" height="60" fill="none" stroke="purple" stroke-width="2"/>
  <circle cx="40" cy="44" r="30" fill="red" stroke="blue" stroke-width="10"  />
  <text x="24" y="48">SVG</text>
</svg>

The result looks like presented below
Posted by at
Labels:

4 comments:

  1. Ivan LagunovOctober 16, 2012 at 1:31 AM

    A quick test showed the following:
    IE8 doesn't show images at all, only text for inline svg;
    Chrome 22 fails with img tag, text is missing;
    Firefox 14 works perfectly with both cases!

    Eternal inter-browser issues =)

    ReplyDelete
  2. Ivan LagunovOctober 16, 2012 at 1:38 AM

    BTW, I've reported this issue to Google with a link to your post ;)

    ReplyDelete
  3. UnknownOctober 16, 2012 at 1:48 AM

    it was an error in the SVG.. somehow i managed to set the @width and @height attributes twice. Should be fixed now.

    ReplyDelete
  4. UnknownOctober 16, 2012 at 1:55 AM

    Hi Ivan, i just checked and yes... it seems like chrome does not properly display the text. Thx for reporting the issue.

    ReplyDelete

Subscribe to: Post Comments (Atom)