Inkscape: A Vector Drawing Tool

Add SVG attributes needed for (X)HTML resizing

Registered by Jon Grossart on 2008-07-01

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:
Needs approval
Assignee:
Matthew Petroff
Definition:
Review
Series goal:
Accepted for 0.91.x
Implementation:
Beta Available
Milestone target:
milestone icon 0.91
Started by
jazzynico on 2013-09-24

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.

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.