4 Kommentare

Pfade in SVG

Mittlerweile hat sich SVG als das Format für Icons und Cliparts durchgesetzt. Es gibt genügend Bibliotheken im Netz; ich verwende oft Wikimedia Commons.

Selbst zu zeichnen führt oft zu klareren Strukturen mit wenigen, bewusst ausgewählten Elementen, die sich anschließend leichter mit CSS formatieren lassen.

Es liegt nahe, dies auch einmal durch KI erledigen zu lassen:

Mit KI erzeugter Baum

Auf unserem Stammtisch waren die Meinungen gespalten: einige fanden das Ergebnis gut und erkannten eine Palme, andere wollten es am Liebsten selbst probieren.

Und da beißt sich die Katze in den Schwanz: Selbst zeichnen scheint umständlich und ohne Grafikprogramm zu kompliziert.

Hier möchte SELFHTML mit einigen kleinen Helferlein zum Selbermachen animieren:

In unserem Tutorial Pfade in SVG haben wir für die verschiedenen Bézier-Kurven und arc-Bögen interaktive Beispiele erstellt, die sich mit Drag & Drop beliebig verändern lassen:

Ich persönlich muss bei den arc flags und sweep flags immer noch ausprobieren, in welche Richtung es geht:

Des Weiteren gibt es nun zwei kleine Helferlein:

In unserem Pfad-Konvertierer können Pfade so vereinfacht werden, dass sie später umso leichter weiterverarbeitet werden können. Das Ergebnis wird gleich angezeigt, sodass man sehen kann falls bei den Bézier-Kurven einige Dezimalstellen zu viel entfernt hat:

PS: Wusstet ihr schon, dass diese Pfad-Kommandos nicht nur in SVG, sondern mittlerweile auch in vielen CSS-Eigenschaften über die path()-CSS-Funktion verwendet werden?
→ Pfad-Animationen mit offset-path

eingeordnet unter:

veröffentlicht von Matthias Scharwies

Antwort verfassen Antwort mit Zitat verfassen

  1. Pfade in SVG

    Jan-Peter Rühmann E-Mail-Adresse des Autors Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Was genial währe wenn mann die Farben einer SVG Datei per css ändern könnte. Hab da aber bis jetzt keinen Weg gefunden.

    Danke für den Artikel.

    Antwort verfassen Antwort mit Zitat verfassen
    –
    Informationen zu den Bewertungsregeln

    1. Pfade in SVG

      Matthias Scharwies E-Mail-Adresse des Autors (Versionen)
      – Informationen zu den Bewertungsregeln

      Servus!

      Was genial währe wenn mann die Farben einer SVG Datei per css ändern könnte.

      Hab da aber bis jetzt keinen Weg gefunden.

      Was willst du erreichen?

      Hast du eine Beispiel-Datei?

      Du könntest sie hier als Bild einfügen und dann schauen wir gemeinsam!

      Herzliche Grüße
      Matthias Scharwies

      --
      bildung.social/@selfhtml
      Antwort verfassen Antwort mit Zitat verfassen
      –
      Informationen zu den Bewertungsregeln

    2. Pfade in SVG

      Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors (Versionen)
      +1 Informationen zu den Bewertungsregeln

      @@Jan-Peter Rühmann

      Was genial währe wenn mann die Farben einer SVG Datei per css ändern könnte.

      Eine SVG-Datei hat keine Farbe. 😜 Aber einen Bindestrich.

      Hab da aber bis jetzt keinen Weg gefunden.

      Wenn man die SVG-Dateien so anlegt, dass die Figuren symbols sind und für deren Farben custom properties vorsieht, dann kann man diese im HTML-ELement per <use> einbinden und dort auch die gewünschten Farben angeben.

      Beispiel: SVG

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
	<defs>
		<symbol id="idic-symbol">
			<path fill="var(--circle-color, yellow)" d="m9.5.15a8.75 8.5 0 10.5 0m-2.3 2.75a3.6 3.4 0 11-.5 0z"/>
			<path fill="var(--triangle-color, gray)" d="m7.9 7 11.1 6.5-10 6.5z"/>
		</symbol>
	</defs>
</svg>

      Im HTML steht

      <svg viewBox="0 0 20 20">
	<use href="https://bittersmann.de/test/assets/idic.svg#idic-symbol"/>
</svg>

      und im Stylesheet

      :root {
	color-scheme: light dark;
	--circle-color: light-dark(#c00, #d44);
	--triangle-color: light-dark(#444, #aaa);
}

      Und so sieht’s aus.

      🖖 Live long and prosper

      --
      “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
      — Bruce Springsteen, Manchester 2025-05-14
      Antwort verfassen Antwort mit Zitat verfassen
      +1
      Informationen zu den Bewertungsregeln

      1. Pfade in SVG

        Rolf B (Versionen)
        – Informationen zu den Bewertungsregeln

        Hallo Gunnar,

        Eine SVG-Datei hat keine Farbe. 😜 Aber einen Bindestrich.

        Und keine Währung…

        Aber, hmmm, was hab ich beim Wiki-Makeover falsch gemacht? Da wollte ich ähnliches erreichen, um den Darkmode zu unterstützen, und es passierte nichts.

        Gelingt deine Methode auch, wenn das SVG kein SVG-Element, sondern ein mit url() eingebundenes Hintergrundbild ist?

        Ich glaube, hier war der Unterschied: SVG Element vs. externe Bildressource.

        Rolf

        --
        sumpsi - posui - obstruxi
        Antwort verfassen Antwort mit Zitat verfassen
        –
        Informationen zu den Bewertungsregeln