Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
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.
Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.




Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.




Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.




Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.





Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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.

wp wegerl.at

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024 Juni