Cross Platform Scalable Vector Graphics with svgweb

by Jim Ray

15 Reader Comments

Back to the Article
  1. Thanks Jim for this information. My current and first attempt at SVG support for an iPad web app is to use canvg (http://code.google.com/p/canvg). Coincidentally, my test graphic is also a USA map which as SVG graphics go is not terribly complex. The good news is that the image renders on iPad, but slowly. So slowly that the logic I added to let the user scale the image to zoom in and pan brought the iPad to its knees—it just froze. Even on my deskstop machine, performance in Firefox is sluggish. In contrast, zooming and panning a jpeg image rendered on the HTML5 canvas is fast on a PC and sluggish on iPad, but at least it’s usable. Have you tried svgweb on iPad to see how it performs?
    Copy & paste the code below to embed this comment.
  2. I have a temperature monitoring app, which mainly runs on iPhone/iPad. Nothing special, but showing a couple of graphs for the temperature/humidity (etc…) flow for an adjustable time-frame. This one used to use Flot (jquery.flot to be exact). Recently I replaced the plotting function with a SVG plot (tried Raphael as well), but finally switched back to flot, because of the drawing speed. While flot draws a set of 5 flow-charts in a mere 150ms, a bare-bone SVG-plot took more than a second for the exact same graphs (on the iPhone). On my iMac i7 it was great, but on the iOS-devices it’s just not snappy enough.
    Copy & paste the code below to embed this comment.
  3. I was thinking of using SVG for vector based designs (Logos, Badges, icons, etc.) to use in a responsive design I’m working on. That way when the browser window is resized these items would still look crisp. What do you think of this type of implementation? This seems like a simple and useful way to work with SVG.
    Copy & paste the code below to embed this comment.
  4. With regards to iPad and other mobile devices, I’ve done a little, by-no-means exhaustive, testing. The svgweb library uses the native SVG renderer built into iOS, which is actually pretty great. The example map from my article renders quite quickly on my iPhone 3GS and iPad, with the Javascript events handled as you’d expect. I’ve done a little bit of testing with Raphael and, anecdotally, I’d say that it’s slower than the native SVG rendering, which you’d expect. This isn’t to say that you shouldn’t consider Raphael for mobile devices, it really does depend on the kind of application you’re building. For charts and graphs, which tend to be graphically simpler than something like the map in my example, I really do recommend using something like Flot. There really is a place for all of these different approaches, and even a mix. It’s an amazing time to be a web developer.
    Copy & paste the code below to embed this comment.
  5. Rheal, that’s an interesting question. I think SVG would help out with responsive designs in some situations—logos, background images, that sort of thing. For icons and badges, I’d probably stick with jpgs or gifs. Bear in mind that the client still has to draw the image once it parses the XML that describes it. For desktop machines, this isn’t such a big deal but for mobile devices, if you’re throwing a lot of SVG images in the form of icons, it could cause some slow render times.
    Copy & paste the code below to embed this comment.
  6. Flash isn’t a problem on Android platforms, and with android based tablets coming… flash will preform even better and faster for mobile. Although I’m very optimistic for html5 and the future of it, but it still has a long ways to go before it can be where Flash is now.
    Copy & paste the code below to embed this comment.
  7. Just a note that the object code to load the svg image doesn’t appear to work in Safari (5.0.3). Great article otherwise.
    Copy & paste the code below to embed this comment.
  8. FWIW, might have just been the IE comment format, and/or the addition of the “+xml” to the non-IE object type. <div id=“results-map”>
        <!—[if IE]>
          <object src=“states.svg” classid=“image/svg+xml”
          width=“500” height=“375”
          id=“state-map” alt=“Interactive map graphic showing electoral gains and loses per state as of the 2010 census”>
        <![endif]—>
        <!—[if !IE]>—>
          <object data=“states.svg” type=“image/svg+xml”
          width=“500” height=“375”
          id=“state-map” alt=“Interactive map graphic showing electoral gains and loses per state as of the 2010 census”>
        <!—<![endif]—>
          </object>
      </div>
    Copy & paste the code below to embed this comment.
  9. I did manage to construct my own map and making it work in FF, But not in IE. Even your example doesn’t working in IE7 or IE8. What may be possibly happening?
    Copy & paste the code below to embed this comment.
  10. SVG is great, unfortunately its not supported by Android (because they wanted to save 1M on the disk image! http://code.google.com/p/android/issues/detail?id=1376) and this stops it from being an end-all-be-all solution. It runs decently on iOS, but like canvas, its performance is not great. Benchmarks between SVG and Canvas show that SVG tends to get slower, quicker, when dealing with complex visualizations. For flash people: Its the same tradeoff experienced in Flash when drawing complex vectors with the Drawing API versus changing pixels with BitmapData. If you are targeting an iOS device the best thing you can do for complex effects is use the DOM and CSS3 because Apple has hardware-accelerated CSS3 (+ webkit-transitions) on iOS.
    Copy & paste the code below to embed this comment.
  11. I was having trouble getting svg’s to display via localhost powered by IIS 4.  I had to configure my server to recognize image/svg+xml MIME type via directions found here: http://planetsvg.com/tools/mime.php
    Copy & paste the code below to embed this comment.
  12. Good points and similar to some of my own. I’m glad to see someone bringing this concept to the forefront.
    Copy & paste the code below to embed this comment.
  13. svg is very good but i wanna workin on android to,  maybe in future can fixed that. thanks a lot for that good article…
    Copy & paste the code below to embed this comment.
  14. It seems SVG is becoming more and more prevalent, but I’m struggling to find information on how it’s currently supported across all the devices (particularly mobile)... ended up here on a search… maybe it’s time for an update on this article to cover the current state of device compatibility?
    Copy & paste the code below to embed this comment.
  15. I think this is a great idea and it’s worth developing
    Copy & paste the code below to embed this comment.