Category:SVG simplification by viewBox

This pseudo-category is in fact a document explaining a technique to optimize and―in a sense―simplify SVG files. The files in this category merely constitute a collection of examples illustrating that technique. These hidden categories are only intended for Wikimedia contributors who want to add or optimize SVG files, but the documented techniques are in no way specific to Wikimedia. Besides being scalable, the images represented by the files in this category have nothing in common (only the files have historical implementation details in common). Most of these documents are in a poor state, as of October 2024, and the effect of some of these so-called simplification techniques would be considered as complexification by most. To address these issues, see discussion about an action plan.

The SVG viewBox attribute enables to use another coordinate system. Two of its advantages are helpful to simplify:

1. scaling to another size may allow the use of shorter coordinate values, and/or of the implied-valued stroke-width="1"; example: .
2. shifting an often needed point (e.g. the center of circles, or transform-rotations) to x=y=0 avoids the repeated declaration of that point; example: .

Explanation: The implied values for a not declared viewBox are "0 0 <width> <height>".
viewBox="-200 -150 600 400" means: the image is drawn with a width of 600 and a height of 400; the origin where x=y=0 is 200 px right of the image's left border (-200 ≤ x ≤ 400), and 150 px below of the top border (-150 ≤ y ≤ 250).

During the process of simplification of an existing SVG drawing, it may be useful to scale the display to another size.
This is easy to maintain with a temporary change of e.g.

width="50" height="60" to width="1000" height="1200" viewBox="0 0 50 60", without altering the width/height-relation.^{[clarification needed]}

To get a reasonable unit system for definitions, a 2^nd svg-element may be introduced, e.g. within the document

<svg … width="10cm" height="12cm" viewBox="3 4 15 18" … > by inserting somewhere
<svg x="3" y="4" width="15" height="18" viewBox="0 0 360 432"> to edit within the real dimensions 360 × 432 of the graphic.

To get the real values an existing SVG drawing with a transforming viewBox, a transform statement can be used. To overwrite e.g.
<svg ... width="w1" height="h1" viewBox="tx ty w2 h2">, after a transform instruction
<g transform="translate(tx ty)scale(w2/w1 h2/h1)"> the viewBox transformations are reset till the corresponding </g>.

See the example Transform example.svg