RE: Re: SVG in responsive and adaptive web pages

Hi Richard,

Some of the tricky stuff involving the viewBox can be seen in action at
pages such as
http://cs.sru.edu/~ddailey/svg/open/SVG.svg

Note how resizing the window automatically resizes the content as well. 

If you look at some of the examples at
http://srufaculty.sru.edu/david.dailey/svg/text/ (all of which were working
in Opera and IE/ASV at the time of our paper [1]) those also take advantage
of things like
font-stretch="ultra-expanded"
textLength="90" 
and
lengthAdjust="spacingAndGlyphs"

most browsers support those, but Firefox doesn't. 

And as Oliver points out lots of powerful stuff can be done with CSS too.

Cheers
David


[1] http://cs.sru.edu/~ddailey/svg/GeometricAccessibility.html

-----Original Message-----
From: [email protected] [mailto:[email protected]]
On Behalf Of Oliver Mooney
Sent: Thursday, February 06, 2014 8:33 AM
To: [email protected]
Subject: [svg-developers] 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