Category:SVG simplification by embedding text

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.

direct to: SVG simplification by text switch0

Text SVG may not be always the best solution. Many possibilities exist to show different styles of text by simple HTML, without drawing it to an SVG file:
678

A small template can guarantee same format for a series of such numbers or texts. Find your own variation! This example is created with the following code: 

{{#tag:div|678
|style="width:2em;line-height:52px;font-size:56px;background:#FFF;color:#000;font-family:Arial, Helvetica, sans-serif;text-align:center;margins:8pt;border:4px solid #000;border-radius:8px"}}

Many other simple shapes can be realized with a <span> version, as e.g. (see Modèle:4/5), or (see Modèle:5/5).[clarification needed]

 See also category: MediaWiki SVG font lists – and Metawiki examples for font embedding.

Often the embedding of text keeps a file small, while on the contrary converting text to paths makes them unnecessarily large.
In most cases the best option to embed text is  text-anchor="middle". With e.g. transform="scale(.6 1)" the text can be zoomed to its space (example)

In some cases of only few simple characters it can be better to draw them with paths, e.g. structural formulas.

 See also categories: Translation possible - SVG (switch) and SVG simplification by text switch.

Base fourteen fonts

[edit]
The factual accuracy of this section is disputed.
I have never heard of any "standard 14 fonts". --Chealer (talk) 03:23, 7 October 2024 (UTC)

Fourteen typefaces are known as the standard 14 fonts:

Times (v3) (in regular, italic, bold, and bold italic)
Courier (in regular, oblique, bold and bold oblique)
Helvetica (v3) (in regular, oblique, bold and bold oblique)
Symbol
Zapf Dingbats


Some tools (Inkscape is a bad example) create very complex attributing for the <text> element. Instead of defining once the attributes and using it for all text of the same appearance, often the definition is repeated again and again for each single word or letter.
As usual, such a definition is often a large block comprising more than 1000 bytes, declaring all defaults and all the not-used attributing:
stroke="none" but then

stroke-width="0.26458332px"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="4"
stroke-dasharray="none"
stroke-dashoffset="0"
stroke-opacity="1"

A typical example for such definitions is (in that diagram) the ever and ever repeated

<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222223px;line-height:2.64583325px;font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans';font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:0px;word-spacing:0px;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
x="60.409351"
y="54.664547"
id="text8535">
<tspan
sodipodi:role="line"
id="tspan8533"
x="60.409351"
y="54.664547"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222223px;font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;stroke-width:0.26458332px">0
</tspan>
</text>

needing each time more than 1400 bytes where less than 100 bytes used only once for all texts are enough, as is shown in this example: 

<g font-family="Verdana" font-size="27" font-style="italic">
<text x="107" y="192">n+</text>
<text x="440" y="192">n+</text>
<text x="242" y="246">p</text>
<text x="299" y="186">x</text>
<text x="286" y="237">L</text>
<text x="26" y="81">Source</text>
<text x="377" y="81">Drain</text>
<text x="221" y="42">Gate</text>
<text x="173" y="339">Body</text>
<text x="112" y="57">Oxide</text>
</g>

<tspan> can be nested+ 

<g font-size="12px">
  <text font-weight="bold" x="10" y="10">Wikipedia hosts knowledges
    <tspan fill="blue"> contributed
      <tspan text-anchor="end" dy="12"> by volunteers</tspan>
    </tspan>
  </text>
  <text font-style="italic" x="15" y="30">Wikimedia Commons hosts free media files for all sister projects.</text>
</g>

When text is converted to path, Inkscape likes it to leave all the <text> and <tspan> definitions, followed then by the now <path> text.

Subcategories

This category has the following 2 subcategories, out of 2 total.

 

Media in category "SVG simplification by embedding text"

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

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