Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
SVG
smilies.4-user.de

Vektorgrafik (SVG) kennen lernen – so von 0 auf 100

Das Bild als Vektorgrafik (2 KB) im Werktitel 'Grundfarben im Fokus'. Boxy SVG.
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Die Anfänge des Themenbereichs zum SVG erscheint knifflig, und dieses ist hier in ein paar Tabs relativiert. Wie gesagt, das ist so Beginns zum Einstieg der Erfolg!

SVG

Basis

Basiskenntnisse zum SVG

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 eine sehr geringe Dateigröße. Vektor-Grafiken sind verlustfrei und ohne Zuwachs der Dateigröße skalierbar und können mit CSS verändert auch mit JavaScript animiert werden.

Vektorgraphik SVG
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.

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″>

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, 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.

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:

Ohne "Remove viewBox" hiermit auch ohne "Prefer viewBox to width/height" = Bildschirms links oben, Beispiels 500px x 500px.„Remove viewBox“ ohne „Prefer viewBox to width/height“ = mittig hin Bildschirmfüllend.„Remove viewBox“ + „Prefer viewBox to width/height“ = Bildschirms links oben, Beispiels 500px x 500px.
Precision

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

Konv.

Bild in SVG-Grafik konvertieren

In Boxy SVG kann man ebenso JPG- oder png-Bild einfügen und dieses wird im SVG-Bild vereingischt, in hochwertiger Qualität, welches die SVG-Bilddatei größer als die JPG-Bilddatei wird. Kleines JPG-Bild und weitere, kreative Anwendung des SVGs der Zweck dieser Funktion.

zeitmaschine, gifzentrale.com

Aktualisiert im Jahr 2022-April