tag:forum.selfhtml.org,2005:/self
Alle SVGs aus einem Sprite anzeigen lassen – SELFHTML-Forum
2018-11-13T07:50:53Z
https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736209#m1736209
marctrix
self@mhis.de
https://www.mhis.de
2018-11-12T06:24:38Z
2018-11-12T06:25:51Z
Alle SVGs aus einem Sprite anzeigen lassen
<p>Hej alle,</p>
<p>hat jemand ein Tool für die Anzeige aller SVGs in einem Sprite?</p>
<p><a href="/users/2153" class="mention registered-user" rel="noopener noreferrer">@beatovich</a> hatte ja schon drauf hingewiesen, dass man so was machen möchte, um den Überblick zu behalten…</p>
<p>Ich würde mir nur gerne die Mühe ersparen, für alle Icons händisch Positionen anzugeben. ausreichen würde mir ein JS, das einfach alle Icons nacheinander in einem html-dokument ausgibt, egal wie (als Image, Inline-SVG, …)</p>
<p>Hauptsache man kann sie sich unkompliziert anzeigen lassen.</p>
<p>Marc</p>
https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736223#m1736223
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2018-11-12T07:51:10Z
2018-11-12T07:51:10Z
Alle SVGs aus einem Sprite anzeigen lassen
<p>@@marctrix</p>
<blockquote>
<p>Ich würde mir nur gerne die Mühe ersparen, für alle Icons händisch Positionen anzugeben.</p>
</blockquote>
<p>Positionen??</p>
<p>Ich würd sagen: wenn man SVG-Icon-Sammlungen so handhabt wie Pixelgrafiken und mit <code>background-position</code> rumhantiert, macht man was falsch. <a href="https://forum.selfhtml.org/self/2018/aug/21/responsive-dateigroessen/1730682#m1730682" rel="noopener noreferrer">Das hatten wir doch schon mal.</a></p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736229#m1736229
marctrix
self@mhis.de
https://www.mhis.de
2018-11-12T08:56:21Z
2018-11-12T08:56:21Z
Alle SVGs aus einem Sprite anzeigen lassen
<p>Hej Gunnar,</p>
<blockquote>
<p>@@marctrix</p>
<blockquote>
<p>Ich würde mir nur gerne die Mühe ersparen, für alle Icons händisch Positionen anzugeben.</p>
</blockquote>
<p>Positionen??</p>
<p>Ich würd sagen: wenn man SVG-Icon-Sammlungen so handhabt wie Pixelgrafiken und mit <code>background-position</code> rumhantiert, macht man was falsch.</p>
</blockquote>
<p>Ich bezog mich auf einen konkreten Tipp von Beat, wie man alle Inhalte eines SVG-Sprites sichtbar machen kann.</p>
<blockquote>
<p><a href="https://forum.selfhtml.org/self/2018/aug/21/responsive-dateigroessen/1730682#m1730682" rel="noopener noreferrer">Das hatten wir doch schon mal.</a></p>
</blockquote>
<p>Da beschreibst du sehr detailliert, wie ich SVGs in meinen Projekten einsetze. WTF — wer hat dir das verraten? </p>
<p>Im Ernst: finde ich gut, mache ich so, weiß aber immer noch nicht, wie ich mal anzeigen lassen kann, was in meinem Sprite so drin ist…</p>
<p>Habe ich da etwas übersehen?</p>
<p>Marc</p>
https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736232#m1736232
beatovich
https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html
2018-11-12T09:45:58Z
2018-11-12T09:45:58Z
Alle SVGs aus einem Sprite anzeigen lassen
<p>hallo</p>
<blockquote>
<p>Ich würd sagen: wenn man SVG-Icon-Sammlungen so handhabt wie Pixelgrafiken und mit <code>background-position</code> rumhantiert, macht man was falsch. <a href="https://forum.selfhtml.org/self/2018/aug/21/responsive-dateigroessen/1730682#m1730682" rel="noopener noreferrer">Das hatten wir doch schon mal.</a></p>
</blockquote>
<p>Ich würde sagen, wenn du in einer Spritemap alle Icons über dem gleichen Raum stackst, machst du auch was falsch.</p>
<p>Du verwechselst hier nämlich Zugriffsmethode (über id) und innere Organisation einer Datei.</p>
<div class="signature">-- <br>
<a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a>
</div>
https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736319#m1736319
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2018-11-13T01:59:22Z
2018-11-13T01:59:22Z
Alle SVGs aus einem Sprite anzeigen lassen
<p>@@marctrix</p>
<blockquote>
<p>Da beschreibst du sehr detailliert, wie ich SVGs in meinen Projekten einsetze. WTF — wer hat dir das verraten? </p>
<p>Im Ernst: finde ich gut, mache ich so, weiß aber immer noch nicht, wie ich mal anzeigen lassen kann, was in meinem Sprite so drin ist…</p>
</blockquote>
<p>Du willst also aus einer SVG-Datei my-symbols.svg</p>
<pre><code class="block language-svg"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>symbol</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>symbol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>symbol</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>symbol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
</code></pre>
<p>so etwas generieren</p>
<pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>symbols of my-symbols.svg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>#foo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/path/to/my-symbols.svg#foo<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>#bar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/path/to/my-symbols.svg#bar<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p>XSLT wäre eine Möglichkeit, SimpleXML eine andere.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736320#m1736320
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2018-11-13T02:41:04Z
2018-11-13T02:49:23Z
Alle SVGs aus einem Sprite anzeigen lassen
<p>@@Gunnar Bittersmann</p>
<blockquote>
<p>Du willst also aus einer SVG-Datei my-symbols.svg</p>
<pre><code class="block language-svg"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>symbol</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>symbol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>symbol</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>symbol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
</code></pre>
<p>so etwas generieren</p>
<pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>symbols of my-symbols.svg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>#foo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/path/to/my-symbols.svg#foo<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>#bar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/path/to/my-symbols.svg#bar<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p>XSLT wäre eine Möglichkeit</p>
</blockquote>
<p>Ewig nicht mehr gemacht. Das XSL könnnte in etwa so aussehen:</p>
<pre><code class="block language-xslt"><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>symbols of my-symbols.svg</title>
</head>
<body>
<dl>
<xsl:apply-templates/>
</dl>
</body>
</html>
</xsl:template>
<xsl:template match="symbol">
<div>
<dt>#<xsl:value-of select="@id"/></dt>
<dd>
<svg>
<use>
<xsl:attribute name="xlink:href">
/path/to/my-symbols.svg#<xsl:value-of select="@id"/>
</xsl:attribute>
</use>
</svg>
</dd>
</div>
</xsl:template>
</xsl:stylesheet>
</code></pre>
<p>Völlig ungetestet.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736329#m1736329
beatovich
https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html
2018-11-13T07:50:53Z
2018-11-13T07:53:58Z
Alle SVGs aus einem Sprite anzeigen lassen
<p>hallo</p>
<blockquote>
<p>@@Gunnar Bittersmann</p>
<blockquote>
<p>Du willst also aus einer SVG-Datei my-symbols.svg</p>
<pre><code class="block language-svg"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>symbol</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>symbol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>symbol</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>symbol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
</blockquote>
<p>In den <defs> hast du mehr Symbols als fertige Icons. Man will aber nur die fertigen Icons darstellen. Diese liegen aber nicht in den defs sondern ausserhalb dessen jeweils in ihrem eigenen <view> Element.</p>
<p>Anderseits, falls man einfach alles <use>-able darstellen will, muss man darauf vorbereitet sein, dass <use>able != darstellbar.</p>
<div class="signature">-- <br>
<a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a>
</div>