Alle SVGs aus einem Sprite anzeigen lassen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Alle SVGs aus einem Sprite anzeigen lassen Mon, 12 Nov 18 06:24:38 Z https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736209#m1736209 https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736209#m1736209 <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> Alle SVGs aus einem Sprite anzeigen lassen Mon, 12 Nov 18 07:51:10 Z https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736223#m1736223 https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736223#m1736223 <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> Alle SVGs aus einem Sprite anzeigen lassen Mon, 12 Nov 18 08:56:21 Z https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736229#m1736229 https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736229#m1736229 <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> Alle SVGs aus einem Sprite anzeigen lassen Mon, 12 Nov 18 09:45:58 Z https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736232#m1736232 https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736232#m1736232 <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> Alle SVGs aus einem Sprite anzeigen lassen Tue, 13 Nov 18 01:59:22 Z https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736319#m1736319 https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736319#m1736319 <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> Alle SVGs aus einem Sprite anzeigen lassen Tue, 13 Nov 18 02:41:04 Z https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736320#m1736320 https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736320#m1736320 <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> Alle SVGs aus einem Sprite anzeigen lassen Tue, 13 Nov 18 07:50:53 Z https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736329#m1736329 https://forum.selfhtml.org/self/2018/nov/12/alle-svgs-aus-einem-sprite-anzeigen-lassen/1736329#m1736329 <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>