Category:SVG simplification by grouping

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

Using some care to arrange elements with the same attributes may avoid to repeat their definition.

Such a structure collects the most used attributes into a group <g …>, and specifies separately the other needed ("inner") attribute values; they may overwrite the predefined ("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>


Since the implementation of Librsvg 2.37 in January 2013 it is also possible to declare attributes globally
with the start tag <svg ... > instead of inserting a first <g> line and closing it by </g>.
Example:
<svg xmlns=... width="300" height="300" ...
fill="#FED" stroke="#000" stroke-width="12"
stroke-linecap="round" stroke-opacity=".4">
This may often allow to keep the code leaner.

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=372352007"