Category:SVG simplification by embedding text

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

direct to: SVG simplification by text switch0
First of all: 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).

 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 pathes 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 pathes, e.g. structural formulas.

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

Base fourteen fonts[edit]

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 169 files are in this category, out of 169 total.

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