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.
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 oder
- das Plug-in SVG Support
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.
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
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
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:
- Bild: „Remove viewBox“ + „Prefer viewBox to width/height“ = Bildschirms links oben, Beispiels 500px x 500px.
- Bild: „Remove viewBox“ ohne „Prefer viewBox to width/height“ = mittig hin bildschirmfüllend.
- Bild: Ohne „Remove viewBox“ hiermit auch ohne „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]