Add SVG attributes needed for (X)HTML resizing

Registered by Jon Grossart

Currently, if you just load a saved SVG file in a web browser (ie, Firefox 3), the image is not resizeable/scalable. If you change the width/height of the object in the <object> tag, then the image is just cropped and scrollbars added. However, two simple attributes added to the <svg> tag of the file allow the browser to have full control over the image and rescale it as you would expect. Ideally, some sort of UI options in the document preferences could be available to set the preserveAspectRatio (or just do via XML editor if need be). Or, if these attribs have some negative effect on overall operation of inkscape, add a "save for web" option that adds them by default (and fits the page to objects).

Example for good defaults:
<svg>
   ... other attribs...
   preserveAspectRatio="xMinYMin meet"
   viewBox="0 0 {width} {height}"
   ... other attribs ...
</svg>

References:
http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

The width attribute on the outermost 'svg' element establishes the viewport's width, unless the following conditions are met:

    * the SVG content is a separately stored resource that is embedded by reference (such as the 'object' element in [XHTML]), or the SVG content is embedded inline within a containing document;
    * and the referencing element or containing document is styled using CSS [CSS2] or XSL [XSL];
    * and there are CSS-compatible positioning properties [ CSS2-POSN] specified on the referencing element (e.g., the 'object' element) or on the containing document's outermost 'svg' element that are sufficient to establish the width of the viewport.

Blueprint information

Status:
Started
Approver:
None
Priority:
Medium
Drafter:
None
Direction:
Approved
Assignee:
Matthew Petroff
Definition:
Review
Series goal:
Accepted for 0.91.x
Implementation:
Beta Available
Milestone target:
milestone icon 0.92
Started by
jazzynico

Whiteboard

Jazzynico, 2009-05-07.
Inkscape 0.47 provides an Optimized SVG output (in File>Save as) which already replace the Height and Width attributes with a viewbox. Do we need to implement viewbox directly in Inkscape SVG output, or can we consider that this extension fixes this issue?

Jon Grossart, 2010-5-29
Well, that takes care of part of the problem, but for web graphics, the preserve aspect ration is also important to make sure image gets scaled as you'd expect it. As SVG starts to actually work more with the web, I think having a UI element or something a little more explicit would be helpful, especially for new people. I've been suing Inkscape for awhile, and I wouldn't necessarily think of going to Optimized SVG to get the viewbox tag.

~suv, 2015-02-23
Moving milestone to 0.92. New documents created with Inkscape 0.91 all have a viewBox attribute added to the root <svg> element, but there is no GUI available which would offer more fine-grained control over the aspect ratio as described.
For new documents, this could for example be implemented via procedural template (specifically targeting documents to be used for the web), and the same script could also be reused as effect extension to edit existing documents (unless more options are added to the document properties dialog).

jazzynico, 2017-01-28
0.92 now provides a GUI to control the viewBox attribute, but still nothing to change preserveAspectRatio. Should we close the blueprint now or re-target to 0.93?

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.