nicht angemeldet
Alle SVGs aus einem Sprite anzeigen lassen
marctrix
Alle SVGs aus einem Sprite anzeigen lassen
marctrix
Gunnar BittersmannHej alle,
hat jemand ein Tool für die Anzeige aller SVGs in einem Sprite?
@beatovich hatte ja schon drauf hingewiesen, dass man so was machen möchte, um den Überblick zu behalten…
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, …)
Hauptsache man kann sie sich unkompliziert anzeigen lassen.
Marc
-
@@marctrix
Ich würde mir nur gerne die Mühe ersparen, für alle Icons händisch Positionen anzugeben.
Positionen??
Ich würd sagen: wenn man SVG-Icon-Sammlungen so handhabt wie Pixelgrafiken und mit
background-positionrumhantiert, macht man was falsch. Das hatten wir doch schon mal.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hej Gunnar,
@@marctrix
Ich würde mir nur gerne die Mühe ersparen, für alle Icons händisch Positionen anzugeben.
Positionen??
Ich würd sagen: wenn man SVG-Icon-Sammlungen so handhabt wie Pixelgrafiken und mit
background-positionrumhantiert, macht man was falsch.Ich bezog mich auf einen konkreten Tipp von Beat, wie man alle Inhalte eines SVG-Sprites sichtbar machen kann.
Da beschreibst du sehr detailliert, wie ich SVGs in meinen Projekten einsetze. WTF — wer hat dir das verraten? 😉
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…
Habe ich da etwas übersehen?
Marc
-
@@marctrix
Da beschreibst du sehr detailliert, wie ich SVGs in meinen Projekten einsetze. WTF — wer hat dir das verraten? 😉
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…
Du willst also aus einer SVG-Datei my-symbols.svg
<svg xmlns="http://www.w3.org/2000/svg"> <symbol id="foo">…</symbol> <symbol id="bar">…</symbol> </svg>so etwas generieren
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>symbols of my-symbols.svg</title> </head> <body> <dl> <div> <dt>#foo</dt> <dd><svg><use xlink:href="/path/to/my-symbols.svg#foo"/></svg></dd> </div> <div> <dt>#bar</dt> <dd><svg><use xlink:href="/path/to/my-symbols.svg#bar"/></svg></dd> </div> </dl> </body> </html>XSLT wäre eine Möglichkeit, SimpleXML eine andere.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
@@Gunnar Bittersmann
Du willst also aus einer SVG-Datei my-symbols.svg
<svg xmlns="http://www.w3.org/2000/svg"> <symbol id="foo">…</symbol> <symbol id="bar">…</symbol> </svg>so etwas generieren
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>symbols of my-symbols.svg</title> </head> <body> <dl> <div> <dt>#foo</dt> <dd><svg><use xlink:href="/path/to/my-symbols.svg#foo"/></svg></dd> </div> <div> <dt>#bar</dt> <dd><svg><use xlink:href="/path/to/my-symbols.svg#bar"/></svg></dd> </div> </dl> </body> </html>XSLT wäre eine Möglichkeit
Ewig nicht mehr gemacht. Das XSL könnnte in etwa so aussehen:
<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>Völlig ungetestet.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
hallo
@@Gunnar Bittersmann
Du willst also aus einer SVG-Datei my-symbols.svg
<svg xmlns="http://www.w3.org/2000/svg"> <symbol id="foo">…</symbol> <symbol id="bar">…</symbol> </svg>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.
Anderseits, falls man einfach alles <use>-able darstellen will, muss man darauf vorbereitet sein, dass <use>able != darstellbar.
-
-
-
-
hallo
Ich würd sagen: wenn man SVG-Icon-Sammlungen so handhabt wie Pixelgrafiken und mit
background-positionrumhantiert, macht man was falsch. Das hatten wir doch schon mal.Ich würde sagen, wenn du in einer Spritemap alle Icons über dem gleichen Raum stackst, machst du auch was falsch.
Du verwechselst hier nämlich Zugriffsmethode (über id) und innere Organisation einer Datei.
-