Re: SVG in responsive and adaptive web pages

Hi Richard,

I’ve been looking at this recently; it’s pretty straightforward. There’s no real difference between using CSS for responsive SVG compared to using it for HTML elements; you can use CSS media directives to apply to SVG elements and they’ll work fine.

There is some tricky stuff around the attributes of the root SVG element. Set the preserveAspectRatio to the kind of aspect ratio you want, and the viewBox needs to be set too. For mobile devices the HTML document should have a viewport set on it too, for example:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=3.0”>

For reference I was looking at the following sources:

If you can use object embeds rather than HTML5 <svg> direct embeds look at:
http://www.joshuasortino.com/journal/creating-a-responsive-svg
http://demosthenes.info/blog/744/Make-SVG-Responsive

General info:
http://meloncholy.com/blog/making-responsive-svg-graphs/

A beautiful example of SVG that shows more detail or less detail depending on the viewer size:
http://demosthenes.info/blog/675/Create-Adaptive-SVG-Illustrations-With-CSS

Hope that helps,

Oliver

Founder, GetBulb Ltd
http://getbulb.com


------------------------------------

-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    [email protected] 
    [email protected]

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo Groups is subject to:
    http://info.yahoo.com/legal/us/yahoo/utos/terms/