Vektorgrafik (SVG) Kennenlernen

Die Anfänge eines Themenbereich erscheinen meist knifflig, und dieses möchte ich hier in ein paar Absätzen relativieren.

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 – um Kenntnis dafür zu bekommen, einige Grafiken anklicken und die Größe der SVGs vergleichen (z. B. Grafik Elefant von 9 KB in schwarz bis 4.9 MB mit komplexe Farben und Formen).

Basiskenntnisse zum „SVG und WordPress“

Basiskenntnisse zum „SVG und WordPress“ findet sich im Artikel fastwp.de f., welcher das Plug-in Safe SVG, Snippets dessen Abwicklung, empfiehlt – mit zur Vorsicht mahnenden Hinweis, von nur halbwegs sicherem SVG Download durch das Plug-in möglich ist.

Plug-in Save SVG

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.

Pro Funktionen

  • SVGO-Optimierung – Sie haben die Möglichkeit, Ihre SVGs beim Upload über unseren SVGO-Server laufen zu lassen, um Platz zu sparen.
  • Wähle, wer hochladen darf – Beschränke SVG-Uploads auf bestimmte Nutzer auf deiner WordPress-Seite oder erlaube jedem, sie hochzuladen.
  • Premium-Support – Pro-Benutzer erhalten Premium-Support, während kostenloser Support in den WordPress-Foren in unserer Freizeit angeboten wird.
  • SVG Sanitization erfolgt über die folgende Bibliothek: https://github.com/darylldoyle/svg-sanitizer.

Weitere Beschreibung

Bei der Verwendung von SVG-Bildern auf Ihrer WordPress-Website kann es schwierig sein, Elemente innerhalb des SVG mithilfe von CSS zu stylen. Jetzt kannst du, leicht! Scalable Vector Graphics (SVG) werden im modernen Webdesign immer häufiger verwendet. Sie können Bilder mit kleinen Dateigrößen einbetten, die ohne Qualitätsverlust auf jede visuelle Größe skalierbar sind. Dieses Plugin bietet nicht nur SVG-Unterstützung wie der Name sagt, es ermöglicht Ihnen auch, den Code Ihrer vollständigen SVG-Datei einfach mit einem einfachen IMG-Tag einzubetten. Durch Hinzufügen der Klasse style-svg zu Ihren IMG-Elementen ersetzt dieses Plugin dynamisch alle IMG-Elemente, die die Klasse style-svg enthalten, durch Ihr vollständiges SVG. Der Hauptzweck davon ist, Styling von SVG-Elementen zu ermöglichen. Normalerweise sind Ihre Styling-Optionen eingeschränkt, wenn Sie nur embed, object oder img Tags verwenden.

EIGENSCHAFTEN

  • SVG-Unterstützung für Ihre MedienbibliothekInline deinen SVG-Code.
  • Funktioniert mit dem neuen Image Widget (WordPress 4.8+)Style SVG-Elemente direkt mit CSS.
  • Super einfache Einstellungsseite mit Anweisungen.
  • Beschränken Sie die SVG-Upload-Fähigkeit auf Administratoren.
  • Legen Sie eine benutzerdefinierte CSS-Zielklasse fest.
  • Extrem einfach zu verwenden.

VERWENDUNG

Installieren und aktivieren Sie zuerst den SVG Support (dieses Plugin). Einmal aktiviert, können Sie einfach SVG-Bilder wie jede andere Datei in Ihre Medienbibliothek hochladen. Als Administrator können Sie auf der Seite mit den Admin-Einstellungen unter Einstellungen> SVG-Unterstützung die SVG-Datei-Uploads nur für Administratoren festlegen und sogar eine benutzerdefinierte CSS-Klasse definieren, die auf Ihr Ziel ausgerichtet werden soll. Wenn Sie nur SVG-Dateien hochladen müssen, um sie als Bilder zu verwenden, müssen Sie den „Erweiterten Modus“ nicht aktivieren. Wird diese Option deaktiviert, wird sichergestellt, dass das Front-End-Skript nicht in die Warteschlange eingereiht wird und die unnötigen Einstellungen verborgen bleiben. Für fortgeschrittene Benutzer: Aktivieren Sie den „Erweiterten Modus“ unter Einstellungen / SVG-Unterstützung. Wenn der erweiterte Modus aktiviert ist, können Sie Ihre SVG-Bilder genauso einbetten wie ein Standardbild, wobei Sie die gewünschten IMG-Tags (in der Textansicht) der Klasse style-svg (oder der von Ihnen definierten benutzerdefinierten Klasse) hinzufügen können. Dieses Plugin kann mit deinem SVG-Code ausgetauscht werden.Beispielsweise:

<img class="style-svg" alt="alt-text" src="image-source.svg" />

oder

<img class="your-custom-class" alt="alt-text" src="image-source.svg" />

Das gesamte IMG-Tag-Element wird nun dynamisch durch den tatsächlichen Code Ihres SVG ersetzt, wodurch der innere Inhalt targetfähig wird. Auf diese Weise können Sie Elemente in Ihrem SVG mit CSS und JS anvisieren. Sie können alle anderen Attribute aus dem IMG-Tag entfernen, da es sowieso verschwindet. Es gibt eine Einstellung zum automatischen Hinzufügen Ihrer Klasse zum IMG-Tag, wenn Sie SVGs in einen Post oder eine Seite einfügen, wodurch auch unnötige Tags entfernt werden. Seit 2.3.11 können Sie erzwingen, dass alle SVG-Dateien inline mit einem einzigen Kontrollkästchen gerendert werden. Darüber hinaus können Sie jetzt auswählen, ob die verkleinerte oder erweiterte Version der JS-Datei verwendet werden soll. Ausgewählte Bilder: Wenn ein Post / eine Seite mit Ihrem SVG als ausgewähltes Bild gespeichert wird, wird ein Kontrollkästchen in der Featured Image Metabox angezeigt, damit Sie es inline darstellen können (nur wenn der erweiterte Modus aktiv ist). Bitte beachten Sie: Wenn Ihr SVG nicht angezeigt wird, ist es wahrscheinlich, dass es mit 0 Höhe und Breite angezeigt wird. In diesem Fall müssen Sie in Ihrem CSS eine eigene Höhe und Breite festlegen, damit SVG-Dateien korrekt angezeigt werden. Wenn Sie irgendwelche Probleme haben, verwenden Sie bitte den Support-Tab und ich werde mein Bestes versuchen, um schnell auf Sie zurückzukommen

SICHERHEIT

Wie beim Hochladen von Dateien gibt es potenzielle Risiken. Ermöglichen Sie Benutzern nur das Hochladen von SVG-Dateien, wenn Sie ihnen vertrauen. Sie haben die Möglichkeit, die SVG-Nutzung nur von der Einstellungsseite aus auf Administratoren zu beschränken. Standardmäßig kann jeder, der Zugriff auf die Medienbibliothek oder die Funktion „upload_files“ hat, SVG-Dateien hochladen (dh Administratoren, Autoren und Editoren).

Bitte beachten Sie, dass es sich bei SVG-Dateien um XML handelt, mit dem jemand bösartigen Code einschleusen kann, wenn Sie nicht genau wissen, wer über Upload-Rechte verfügt.


WARNING Hinweis bei Bilder im SVG-Format

In Ansicht1 der Bilder Mediathek (Medienübersicht) wurde bei den SVGs folgendes Warning angezeigt:

1) Anmerkung für Link (Mediathek/Bilder-Ansicht): Die SVG-Bilder sind aufeinander folgend für sich gereiht, also ohne Bilder anderen Formats. „Mediathek“ und Editors „Medien hinzufügen“ erfolgt die normale Reihung mit anderen Dateiformaten.

WARNING: ILLEGAL STRING OFFSET ‚WIDTH‘ IN /USERS/[…]/THEMES/TWENTYFOURTEEN/IMAGE.PHP ON LINE 31
WARNING: ILLEGAL STRING OFFSET ‚HEIGHT‘ IN /USERS/[…]/THEMES/TWENTYFOURTEEN/IMAGE.PHP ON LINE 31

Re­cher­che im Netz – Tipp ähnlicher Relation – Theme Twenty Fourteen image.php Code Linie 31 entfernen  (ergo wäre nun die genauere Funktionalität wie Zusammenhangs des betreffenden Codes wissenswert). – Also im Motto „probieren geht über studieren“:

Theme Twenty Fourteen image.php, Linie 31 entfernen —

<span class="full-size-link"><a href="<?php echo esc_url( wp_get_attachment_url() ); ?>"><?php echo esc_html( $metadata['width'] ); ?> &times; <?php echo esc_html( $metadata['height'] ); ?></a></span>

Die WARNINGs sind hiermit weg*.

* … dem Adverb „weg“ das Verb „eliminiert“, hieße, (bildungssprachlich) das Problem aus einem größeren Komplex herauslösen, um es gesondert zu behandeln, also spez. PHP-Code zur Varianz (Komplexität) wäre die elegante Form.

So weit gangbar: Bilder hochladen, JPG , PNG wie SVG; Website Darstellung der Bilder okay. Die SVGs in Galerieansicht sind iPads somit auch geeignet (welches vorher nicht möglich war), aber am Mac die SVG-Bildern mit [Remove viewBox“ ohne „Prefer viewBox to width/height“ = mittig hin bildschirmfüllend] in Galeriansicht nach wie vor nicht visuell werden. S. SVGomg ↓.

Bemerkung: In Recherche Suchmaschinen diesen Umfelds sind etliche Webseiten, welche dasselbe Problem mit den WARNINGs darstellen – scheinbar ohne es zu wissen.

Die gelöschte Linie laut WorPress Codex:

wp_get_attachment_url(): Gibt einen vollständigen URI für eine Anhangsdatei oder bei einem Fehler false zurück.

Anmerkungen: Sie können die Ausgabe dieser Funktion über den URL-Filter wp get attachment ändern. – Diese Funktion wird die URL nicht urlencodieren. Wenn Sie Anhänge mit ungültigen Zeichen in ihrem Namen haben, sollten Sie die Ausgabe dieser Funktion mit einem Rawurlcode versehen, um eine gültige URL zu erhalten.

$metadata: Abrufen des Anhangsmeta-Felds für die Anhangs-ID.

Wo ist ein PHP’ler ;-)

Thread zum Thema WARNING Hinweis

S.  Illegal string offset warning for Height and Width Übersetzung:

Ungültige Zeichenfolgenversatzwarnung für Höhe und BreiteCraig (@digimouse) Vor 6 Monaten (Okt. 17)
Ich habe das Plugin wie zuvor benutzt, aber dieses Mal mit dem WP-Bild-Widget und wenn ich das mache, wird eine PHP-Warnung für unzulässigen String-Offset auf Höhe und Breite ausgegeben. Siehe: Warnung: Ungültige Zeichenfolgenverschiebung ‚Höhe‘ in C: \ Benutzer \ Craig \ Documents \ Websites \ hiringsauce.dev \ wp-includes \ media.php in Zeile 989


Plugin AutorBenbodhi (@benbodhi)
Kannst du bitte versuchen, das Standardthema twentyixteen und das Widget SVG Support und WP Image aktiv zu verwenden? – Wenn es dann noch passiert, lass es mich wissen und ich werde sehen, ob ich weiter helfen kann.


Craig (@digimouse)
Ich habe eine neue Version von WP mit Twenty Sixteen Thema installiert und das gleiche Problem ist voreingestellt.Könnte das etwas mit dem SVG-Code selbst sein? HINWEIS: W3C Validiert es als sauberes SVG 1.1, also ist das eine lange Geschichte.


Plugin AutorBenbodhi (@benbodhi)
Das ist sicherlich eine Möglichkeit.Versuchen Sie dieses: https://live.mrbillstunes.com/wp-content/uploads/2017/04/mrbillstunes.com-mr.bill-logo_min.svgDas funktioniert definitiv auf einer meinen Seiten.


Craig (@digimouse)
Ich habe es gerade bei der Installation von Twenty Sixteen versucht und die gleichen Fehler sind wie zuvor.WP Version 4.8.2?


Plugin AutorBenbodhi (@benbodhi)
Es könnte nur die Kombination von SVG Support und dem WP Image Widget sein. Verwenden Sie das eingebaute Image Widget oder ein Plugin? Ich habe dieses Problem mit dem eingebauten Widget nicht gesehen, werde aber versuchen, es jetzt zu replizieren und zu sehen, was passiert.


Craig (@digimouse)
Ja, mit eingebautem Widget ab Version 4.8.Übrigens wirft es diese Warnung auf Breite und Höhe, aber rendert immer noch SVG auf der Seite. Nicht sicher, ob das beim Debugging einen großen Unterschied macht. Habe das gefunden – https://core.trac.wordpress.org/ticket/40920


Plugin AutorBenbodhi (@benbodhi)
Es ist nur eine Warnung, also können Sie Warnungen sicher abschalten und es wird in Ordnung sein und wird wie gewohnt funktionieren. Du solltest sie sowieso nicht wirklich auf einer Live-Site veröffentlichen … obwohl ich nicht sicher bin, ob es live oder dev ist. – Trotzdem ist es schön, keine Warnungen zu sehen. Ich versuche aktiv zu reproduzieren und werde sehen, was ich finden kann.


Plugin AutorBenbodhi (@benbodhi)
Ich habe es geschafft, das Problem jetzt zu reproduzieren, aber es könnte eine Weile dauern, den Code zu ändern und das Plugin zu aktualisieren. Ich werde so schnell wie möglich daran arbeiten und ein Update herausbringen, damit es wieder mit dem Bild-Widget funktioniert … früher. – In der Zwischenzeit können Sie Ihr SVG-Bild-Tag wie gewohnt in das Standard-Text-Widget einfügen, bevor das Bild-Widget integriert wurde. – Vielen Dank, dass Sie dies hervorgehoben haben. Ich benutze das Bild-Widget eigentlich nirgends, daher müssen die Benutzer mich über einige Dinge informieren.


geradeaus.de (@ matthias-reuter)
Ich kann bestätigen, dass dieser Fehler auch in meinen Umgebungen auftritt. Natürlich sollten auch Benachrichtigungen und Warnungen behoben werden, da diese das Fehlerprotokoll belasten und den Entwicklungsfortschritt verlangsamen.


Plugin AutorBenbodhi (@benbodhi)
Danke für die Bestätigung @ matthias-reuter,Ich werde daran arbeiten, sobald ich eine solide Zeit habe, um sie einzusetzen. Danke für deine Unterstützung!


bluesix (@bluesix)
Vor 4 Monaten, 1 WocheGibt es hierzu Neuigkeiten? Ich sehe immer noch den Fehler / die Warnung.


Plugin AutorBenbodhi (@benbodhi)
Entschuldigung für die Verzögerung alle!In letzter Zeit war es schwer, mir Zeit zu widmen, zumal ich nicht bezahlt werde. – Ich arbeite heute aktiv daran, mit etwas Glück werde ich ein weiteres Update mit dieser behoben.


geradeaus.de (@ matthias-reuter)
Bitte kontaktiere mich, ich würde dich gerne mit 100 Dollar finanzieren, um das früher zu beheben, wenn dir das irgendwie hilft. info@straightvisions.com


Plugin AutorBenbodhi (@benbodhi)
Danke @ matthias-reuter.Ich arbeite aktiv daran, während wir sprechen.


geradeaus.de (@ matthias-reuter)
@benbodhi das ist großartig und Geld ist out, wirklich schätzen Sie Ihre laufende Unterstützung für dieses Plugin.


Plugin AutorBenbodhi (@benbodhi)
Hi @webdados und alle anderen,Entschuldigung für die Verspätung!Ich habe vor Kurzem den ganzen Tag an dem Plugin gearbeitet, bin aber nicht ganz hingekommen. Ich hoffe, dass ich es in der kommenden Woche schaffen kann. Vielen Dank für Ihre Geduld! Ich werde dieses Update so schnell wie möglich veröffentlichen.


Webdados (Marco Almeida)
(@webdados)Dies könnte ein Kernproblem sein …https://core.trac.wordpress.org/ticket/40920


Plugin AutorBenbodhi (@benbodhi)
Vor 3 Monaten, 3 Wochen (Dez. 17)
Dieser Thread verweist auf Code von Drittanbietern, da WordPress standardmäßig keine SVG-Uploads unterstützt.

Bild-Widget v. v. Text-Widget

Aus dem Thread geht zudem hervor, dass das Bild-Widget der Darstellung SVGs erwünschter Bildgröße (z. B. 150x150px) ungeeignet ist, aber selbiges in Einfügung im Text-Widget funktionell ist.

SVG-Grafiken erstellen, optimieren, konvertieren

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

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

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.

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 ist am iPad funktionell, aber am Mac Safari und anderer Internet Explorer die mittlere Vektorgrafik [Remove viewBox“ ohne „Prefer viewBox to width/height“ = mittig hin bildschirmfüllend] nicht visuell wird, also es müssten 3 Vektorgrafiken w. o. dargestellt sein.

Precision

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

Bilder 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 …

pngtosvg.online/de/
https://de.vectormagic.com (kostenpflichtig)


Hinweise

Positioning SVG (Microsoft Translator)
W3Schools.com/SVG- Tutorial (Microsoft Translator)
SVG Viewport and View Box – Jenkov.com (Microsoft Translator)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.