Category:SVG simplification by grouping

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search

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.

Using some care to arrange elements which share attributes may avoid to repeat their definition.

Such a structure collects the most used attributes into a group element (<g …>), and specifies separately the other needed ("inner") attribute values; they may override the inherited ("outer") group attribute values. 

<g stroke="#000" stroke-width="3" stroke-linejoin="round" fill="#093">
  <path stroke-width="5" …>

  <g fill="#FFF">
    <path …>
    <path …>
  </g>

  <path stroke="#F00" …>
</g>

It is also possible to set attributes globally with the start tag <svg …> instead of adding a <g> element at the root (example: <svg xmlns=… width="300" height="300" … fill="#FED" stroke="#000" stroke-width="12" stroke-linecap="round" stroke-opacity=".4">).

In general, a list of attributes can be written either

  • stroke="#000" stroke-width="3" stroke-linejoin="round" fill="#093" opacity=".4"

or with the "style=" element

  • style="stroke:#000;stroke-width:3;stroke-linejoin:round;fill:#093;opacity=.4"

It can easily be seen that with the style element the same number of bytes is needed for 4 attributes; less attributes need less bytes without it, more than five need less bytes with it.

Media in category "SVG simplification by grouping"

The following 34 files are in this category, out of 34 total.

Retrieved from "https://commons.wikimedia.org/w/index.php?title=Category:SVG_simplification_by_grouping&oldid=934533885"