Vektorgrafik (SVG) Kennenlernen

Das Bild als Vektorgrafik (2 KB) im Werktitel 'Grundfarben im Fokus'. Boxy SVG.

Die Anfänge des Themenbereich zum SVG erscheint knifflig, und dieses ist hier in ein paar Tabs relativiert. Indessen ist das hier in Recherche.

SVG

[tabby title=“Basis“]

Basiskenntnisse

SVG (Skalierbare Vektorgrafik) ist ein Format der Sprachfamilie XML und beschreibt zweidimensionale Vektorgraphiken, welche sich im Web-Browser gestalten. Anstelle von Farbwerte und Formen über Pixel sind Vektor-Grafiken mathematisch beschrieben und haben hierbei eine sehr geringe Dateigröße. Vektor-Grafiken sind verlustfrei und ohne Zuwachs der Dateigröße skalierbar und können mit CSS verändert und/oder JavaScript animiert werden.

Vektorgraphik
Vektorgrafik mit Hintergrund und Formen, 5 KB

Das Bild im SVG-Format hat 5 KB und ist durch anklick‘ deren Vergrösserung sowie evtl. weiteres zoomen ebenso knackscharf dargestellt.

  • SVG-Bilder kreativerer Anwendung, also mit Farbverläufen und besonderen Formen, beziehen bald viel mehr KBs. S. Vektorgrafiken (pixabay) – um Kenntnis dafür zu bekommen, einige Grafiken anklicken und die Größe der SVGs vergleichen. Bspw. gibt es gleiche Grafiken paar KB in schwarz bis 5 MB mit komplexe Farben und Formen.

Weitere Basiskenntnisse zum „SVG und WordPress“ findet sich im Artikel fastwp.de f., welcher zur Bewerkstelligung von SVG und WordPress das Plug-in Safe SVG, anstatt Snippets dessen Abwicklung, empfiehlt! –, aber mit zur Vorsicht mahnenden Hinweis, von nur halbwegs sicherem SVG Download möglich ist. Siehe weiter im nächst Tab.

[tabby title=“Plug-ins“]

WP-Plug-ins

Das Plug-in Save SVG

Zuerst einmal zum neuen Stand vom SVG-Upload in WordPress 5

Ob das Plug-in mehr Sicherheit gibt?

Originär: Sicheres SVG ist der beste Weg, um SVG-Uploads in WordPress zu ermöglichen! Sie können SVG-Uploads zulassen und sicherstellen, dass sie bereinigt werden, um SVG / XML-Schwachstellen zu stoppen, die Ihre Website beeinträchtigen. Es gibt Ihnen auch die Möglichkeit, eine Vorschau Ihrer hochgeladenen SVGs in der Medienbibliothek in allen Ansichten anzuzeigen.

Kostenlose Funktionen:
  • Sanitized SVGs – Öffnen Sie keine Sicherheitslücken in Ihrer WordPress-Site, indem Sie Uploads von unsanisierten Dateien erlauben.
  • Anzeigen von SVGs in der Medienbibliothek – Vorbei sind die Tage, an denen man raten muss, welches SVG das richtige ist. Wir werden SVG-Vorschauen in der WordPress-Medienbibliothek aktivieren.

Liebevoll Sicheres SVG? Probieren Sie die Pro-Version für zusätzliche Funktionen.


… test test test, aber so viel steht fest, seit Update von Plug-in Safe SVG von Version 1.9.8. zu Version 1.9.9.  passt es nicht 🙂

Schwierigkeiten mit Plug-in ‚SVG Support‘: Die SVG Beitragsbilder sind defekt. Ähnlich defekt wie in der neuen Version von ‚Safe SVG‘, Version 1.9.9. Derselbe defekt mit Plug-in WP SVG images. So mal nach erneuten zweimaligen hochladen des SVG wieder mal okay.

Bildschirmfoto 2020-08-30 um 08.59.32
S. oben das Beitragsbild. Stattdessen ist nur mehr genau wie hier die Schraffierung.
Bildschirmfoto 2020-08-30 um 09.13.40
… Oder das Titelbild bspw. im Theme TwentySeventeen. Das sollte die ganze Breite ausfüllen.

Nein, der SVG Beitragsbilder müssen mit viewBox oder width / height sein. Beide zusammen dazu unterschiedliche Größen, ergibt den Fehler.

Also in der ersten Zeile des SVG, das funkt bspw.:

<… … … svg viewBox=“0 0 1038 576″>

oder

<… … … width=“1038″ height=“576″>

[tabby title=“Erstellen“]

SVG-Grafiken erstellen

Vektorgrafik, Übungsbild Boxy SVG, Komprimierung von 6 KB/2 KB SVGomg.

Adobe Illustrator
Kulturbanause-Team: SVG-Grafiken erstellen, exportieren und einbinden (Adobe Illustrator).

Boxy SVG 
Einfacher, gelobter SVG Editor (Boxy SVG) um gut €10,- . Gebrauchsanweisung? – Hier ein Tutorial (Google Übersetzer), welches mit Boxy SVG vorzeigt … Wer kein Blitzmerker, muss es lernen – wer mit Bildbearbeitungsprogramm versiert, von Vorteil. S. Anfänger für Anfänger.

SVG erstellen
… für Anfangs nützliche Hervorhebungen

Den Einstieg erleichtert obiges Tutorial sowie folgenden kleine Tipps der Arbeitsablauf verständlicher wird.

SVG: Bearbeitungsfäche

Vektorgrafik (Wikimedia): 1 KB

Der Ursprung des anfänglichen Darstellungsbereiches befindet sich links oben, die x-Richtung zeigt nach rechts, die y-Richtung nach unten, s. Start mit SVG … Inhaltsverzeichnis durchsehen, um evtl. Fragestellungen die Antwort zu finden. Die SVG/Referenz könnte für Informationen zu Elemente, Attribute und Eigenschafen praktisch sein.

SVG-Dateien responsiv

Die Eigenschaft viewBox und keine Höhe und Breite vorgeben.

[tabby title=“Opt.“]

SVG-Grafiken optimieren

SVG-Grafiken können unnütz groß werden, sind aber in wenigen Schritten zu optimieren, sodass sie schneller vom Browser geladen werden.

fastwp.de
SVG-Dateien für deine Website optimieren
Responsives SVG: Was geht, was geht nicht?
wiki.selfhtml.org/wiki/SVG/Grafiken_optimieren#Code-Optimierer:
petercollingridge.appspot.com/svg-editor
… ins Einzelne gehend: SVGomg (omg = Oh mein …) jakearchibald.github.io/svgomg

SVGomg

Remove viewBox
Bevorzugen Sie viewBox

Remove viewBox hinzugeben (also diese Komprimierung abschalten) und ohne Prefer viewBox to width/height (d. h., diese Komprimierung einschalten), um nach anklicke der Vektorgrafik diese mittig hin Bildschirmfüllend zu visualisieren. Wiki/SVG:  Die viewBox-Region wird wiederum so skaliert, dass sie in den durch width und height definierten Anzeigebereich passt. Ist viewBox nicht angegeben, so fallen die Koordinaten mit denen des Anzeigebereiches zusammen, der dann den Ursprung links oben mit den Koordinaten 0,0 hat.

Prefer viewBox to width/height
Bevorzugen Sie viewBox zu Breite / Höhe

Ohne Prefer viewBox to width/height Beispiels svg viewBox="0 0 500 500" width="500" height="500" wird die Vektorgrafik hin Bildschirmfüllend dargestellt.Wiki/SVG: Ohne Angabe von width und height wird auf den Darstellungsbereich des Programmes skaliert, das entspricht jeweils einem Wert von 100%; entsprechend größer oder kleiner wird der Bereich, wenn andere Werte als 100% verwendet werden.

Beispiele:

Vektorgrafik mit Hintergrund, einfachen Formen und Farben, je 2 KB:

  1. Bild: „Remove viewBox“ + „Prefer viewBox to width/height“ = Bildschirms links oben, Beispiels 500px x 500px.
  2. Bild: „Remove viewBox“ ohne „Prefer viewBox to width/height“ = mittig hin bildschirmfüllend.
  3. Bild: Ohne „Remove viewBox“ hiermit auch ohne „Prefer viewBox to width/height“ = Bildschirms links oben, Beispiels 500px x 500px.
SVG Beispiel
Ohne „Remove viewBox“ hiermit auch ohne „Prefer viewBox to width/height“ = Bildschirms links oben, Beispiels 500px x 500px.
SVG Beispiel
„Remove viewBox“ ohne „Prefer viewBox to width/height“ = mittig hin Bildschirmfüllend.
SVG Beispiel
„Remove viewBox“ + „Prefer viewBox to width/height“ = Bildschirms links oben, Beispiels 500px x 500px.

Dasselbe in Galerieansicht:

Precision

Präzision ist die Voreinstellung (3). – soweit okay.

[tabby title=“Konv.“]

Bild in SVG-Grafik konvertieren

In Boxy SVG kann man ebenso JPG-Bild einfügen und dieses wird in SVG-Bild konvertiert, in hochwertiger Qualität, welches die SVG-Bilddatei größer als die JPG-Bilddatei wird. Also für solcherlei Anwendung ist das SVG-Format nicht geschaffen. Kleines JPG-Bild und weitere, kreative Anwendung des SVGs der Zweck dieser Funktion scheint oder einfaches png-Format zur Weiterverarbeitung in SVG-Format umwandeln.

[tabbyending]

[mybutton]