Firefox - SVG for Responsive Web Apps

Web apps with layout of graphics and components that responds by scaling to screen size of mobile device in use.

1. Inline SVG

On-screen interactive Scalable Vector Graphics - Example, program changes diagram according to user inputs - SVG does scale diagram to fit the view port (like html canvas) width or height and does center diagram either horizontally or vertically within the view port but width and height are fixed, not responsive to screen size.
Inline SVG is embedded directly in HTML5 page:

SVG-1

Case 1 - Aspect ratio (width/height in real-world units) of diagram bounding rectangle is greater than that of viewport (blue - pixels). Viewbox (red) defines the bounding rectangle - with default setting of xMidYMid meet, diagram (x,y) points are scaled according to scale factor = (viewport width/bounding rectangle width) so that diagram fits width of viewport and is centered vertically.

SVG-2

Case 2 - Aspect ratio (width/height in real-world units) of diagram bounding rectangle is same as that of viewport (blue - pixels). Viewbox defines the bounding rectangle - with default setting of xMidYMid meet, diagram (x,y) points are scaled according to scale factor = (viewport width/bounding rectangle width) or (viewport height/bounding rectangle height) so that diagram fits width and height of viewport.

SVG-3

Case 3 - Aspect ratio (width/height in real-world units) of diagram bounding rectangle is less than that of viewport (blue - pixels). Viewbox defines the bounding rectangle - with default setting of xMidYMid meet, diagram (x,y) points are scaled according to scale factor = (viewport height/bounding rectangle height) so that diagram fits height of viewport and is centered horizontally.

SVG for web pages, like (technical) illustrations, charts, diagrams, can be constructed directly using conventional coordinates and arbitrary units of measurement - scaling of graphics to fit chosen size of on-screen canvas is taken care of using the SVG viewBox. And SVG embedded in HTML page can be scripted - JavaScript works with SVG elements same as HTML.

2. Responsive SVG - Graphics

SVG viewBox is used in conjunction with the View Port width and height settings in the root <svg>. For this method of responsive SVG, for the View Port to respond by resizing to (mobile) device screen sizes, View Port (width and height setting) is not used:

SVG-4

Case 4 - Click here to open graphic in new window, then resize browser window width and see response of graphic to reduced screen size.
For presentation graphics - when SVG does not interact with user controls - this response will satisfactorily adapt graphic to mobile devices. But when graphic is scripted and viewBox size is changed - click Set Diagram button repeatedly and see height of viewport change because <div> replaces <svg> width and height.
The <div> width adjusts to the screen size (subject to max-width if specified); the view box scales to width of <div>; the height of <div> adjusts to scaled height of view box.
For SVG Web Apps, requirement here is fixed-size viewport responding to screen size and with same scaling of graphic as (1) Inline SVG.

JavaScript Scaling

SVG-5

Case 5 - Click here to open graphic in new window, then resize browser window width and see response of graphic to reduced screen size; also, click Set Diagram button repeatedly and see diagram change wihout affecting size of viewport.
In JavaScript, width of View Port (viewportX) is set to width of <div> that adjusts to device screen width, and height of View Port (viewportY) is set to fixed percentage of viewportX. In this case viewportY is set equal to viewportX to give square viewport. Given size of viewport (pixels) and size of bounding rectangle (units) screen coordinates are obtained so as to scale and center the graphic within the viewport in same way as SVG View Port and viewBox wtih preserveAspectRatio="xMidYMid meet".
The coordinate geometry applied here is described in CoordsMapping.pdf.

3. Responsive SVG - HTML Controls

SVG-6

Case 6 - Click here to open graphic in new window - works in Firefox (supports SVG <foreignObject>).
Resize browser window width and see response of HTML controls to reduced screen size.
The <div> width adjusts to the screen size (subject to max-width of 600px specified); the view box scales to width of <div>; the height of <div> adjusts to scaled height of view box.
Use of SVG <foreignObject> conceptually provides a panel (with width and height specified) for HTML elements; SVG effectively adopts HTML controls and provides reponsive HTML. A real advantage is HTML layout using absolute positoning.

4. SVG - Responsive Web App

Demo Triangles SVG App

+ Open in new window here
+ Address mobile Firefox to
    webapps.me.uk/triangles.html
+ Download zipped source files here

 

Firefox - Responsive Design View
Open Triangles app in Firefox - Ctrl+Shift+M for viewing at different viewport sizes.
Instructions at developer.mozilla.org/en/docs/Tools/Responsive_Design_View.