Ein Leitfaden für das Bildformat Scalable Vector Graphics (SVG).

Es gibt einen Aspekt des Internets, von dem Sie nicht wegkommen: Bilder. In den Anfängen des Internets war es eine reine Textangelegenheit. Wir haben jetzt jedoch spezielle Bildformate, die uns helfen, gestochen scharfe Bilder anzuzeigen. Das Format Scalable Vector Graphics (SVG) ist eines der neuesten und flexibelsten verfügbaren Formate.

Wir werden später mehr erklären, aber ein SVG ist eine Sammlung von Daten, die als Bild auf dem Frontend dargestellt wird. Das bedeutet, dass Sie Cascading StyleSheets (CSS) verwenden können, um das Bild zu manipulieren. Darüber hinaus können Sie die Größe nach Bedarf ohne Qualitätsverlust ändern.

In diesem Beitrag werden wir mehr über skalierbare Vektorgrafiken sprechen und wie sie Ihnen helfen können. Wir besprechen auch, wie Sie sie in Ihre WordPress-Website integrieren können.

Eine kurze Einführung in die gängigsten Web-Bildformate

Bevor wir uns mit SVGs und ihrer Verwendung befassen, lohnt es sich, über die primären Bildformate zu sprechen, die wir für das Web verwenden. Es gibt drei zu beachten:

• Joint Photographic Experts Group (JPEG). Wie der Name schon sagt, wenn Sie mit einer Digitalkamera aufgenommene Fotos anzeigen möchten, ist dies das richtige Format für Sie.
• Portable Netzwerkgrafiken (PNG). Sie sollten das PNG-Format verwenden, um alle erstellten Grafiken anzuzeigen, z. B. die von Adobe Illustrator.
• Graphics Interchange Format (GIF). Hey, jeder mag lustige Clips von Fernsehsendungen, um sie als Reaktion auf Social Media zu verwenden! GIF ist das perfekte Format für animierte Grafiken, die auch portabel sind.

Während einige das Format wählen, das ihnen gefällt, ist dies kein optimaler Ansatz. Wenn Sie sich beispielsweise dafür entscheiden, jedes Bild als GIF zu erstellen, könnten Sie astronomische Dateigrößen und Bilder von schlechter Qualität sehen. Im Gegensatz dazu sollten Sie JPEGs nicht für Grafiken verwenden, da PNG das optimalere Format ist.

Was das skalierbare Vektorgrafikformat ist

Sie sollten in diesem Abschnitt etwas Geduld mit uns haben, da wir in einigen Bereichen technisch werden. Außerdem könnte das Konzept von SVGs verwirrend sein.

Skalierbare Vektorgrafiken gibt es nicht (sozusagen). Tatsächlich sind sie überhaupt keine Grafik oder kein Bild, sondern eine Form von Extensible Markup Language (XML). Für die Unwissenden ist dies ein enger Verwandter von HTML, jedoch ohne einige Aspekte dieser Sprache (wie vordefinierte Tags).

Als Vergleich, den Sie vielleicht bereits verstehen, überlegen Sie, wie Sie Formen mit CSS erstellen können. Darüber werden wir in Kürze mehr sprechen. Nun, stellen Sie sich dieses CSS vor, das in einen Dokument-Wrapper eingebettet ist, den Sie mit einem Standarddateiformat und einer Standardstruktur aufrufen (z. B. image.svg ).

Genauer gesagt bietet SVG den Rahmen, um Formen wie Kreise und Rechtecke zu definieren, während HTML einen Rahmen zum Definieren von Überschriften, Absätzen, Abschnitten, Listen und mehr bereitstellt. Dies erklärt jedoch immer noch nicht, warum wir das SVG-Format haben (und manchmal brauchen). Darüber sprechen wir als nächstes.

Warum wir SVGs haben

Vor SVGs haben Sie PNGs verwendet, um Grafiken anzuzeigen. Frühe Bilder im Internet könnten GIFs sein, aber im Allgemeinen sind PNGs das vorherrschende Bildformat. Die Frage ist weniger: „Warum haben wir SVGs?“, sondern „Was fehlt aktuellen Bildformaten, das ein SVG lösen kann?“ Die Antwort lautet: Dynamik.

Wenn Sie auf die primären Web-Bildformate zurückblicken, passen zwei nicht wirklich zu erstellten Grafiken (JPEG und GIF). Dies lässt PNGs die Belastung aushalten. PNGs leiden jedoch unter einigen Problemen, die erst jetzt für das moderne Web offensichtlich sind:

• Sie sind statisch, da Sie das Bild offline erstellen und es in diesem bestimmten Format exportieren. Das bedeutet, dass es etwas unflexibel ist.
• Als Erweiterung können Sie das 'Make-up' des Bildes nicht ändern. Da wir eine Reihe von Geräten erstellen und anzeigen müssen, müssen Sie sich manchmal an diese „Ansichtsfenster“ anpassen. Nehmen Sie sich die Mühe, alle Logogrößen nur für Desktop- und große mobile Geräte mit PNGs zu erstellen.
• Obwohl PNGs leicht sein können, liegt es in der Verantwortung des Designers und Websitebesitzers sicherzustellen, dass eine Bildoptimierung stattfindet. Ein PNG könnte ohne Optimierung schwer sein, manchmal über ein Megabyte.

Außerdem füllten PNGs einen Teil einer Lücke zu einer Zeit, als es nur wenige Optionen gab, die eine ausreichend hohe Bildqualität liefern konnten. Damals steckte CSS noch in den Kinderschuhen, und wir hatten noch nicht den Design- und Entwicklungsspielraum, den wir jetzt haben.

Beispielsweise können wir die Eigenschaft border-radius erst seit 2010 verwenden. Damit lassen sich runde Kanten und sogar Kreise definieren. Sie werden es häufig auf Schaltflächen in Aktion sehen:

Sie verwenden CSS, um Formen zu erstellen, die skaliert und an den Bildschirm angepasst werden können, aber Scalable Vector Graphics kann mehr. Tatsächlich werden Sie sich dafür jetzt eher SVGs als CSS zuwenden, obwohl sie auch keine Wunderwaffe sind.

Die Vorteile skalierbarer Vektorgrafiken

Wie jedes andere Bildformat sind skalierbare Vektorgrafiken nicht perfekt. Natürlich gibt es viel Positives:

• Ein SVG passt sich den Abmessungen eines Geräts an, oft ohne weiteres Zutun Ihrerseits. Dies verkürzt Ihre Entwicklungs- oder Erstellungszeit.
• Die zugehörige Datei für ein Bild ist klein, da Sie nur ein SVG benötigen. Im Gegensatz dazu muss ein PNG-Logo ein paar verschiedene Größen und Abmessungen bieten. Dies nimmt Serverplatz in Anspruch.
• Darüber hinaus sind SVGs performanter als PNGs, da Sie nur eine Datei laden müssen, die mehrere Kilobyte kostet. Dieses Paket von PNG-Dateien kann je nach Qualität, Quantität und Optimierung mehrere Megabyte groß sein.

Insgesamt können Sie mit SVG mehr machen als mit jedem anderen Bildformat. Sowohl ein Entwickler als auch ein Grafikdesigner können SVGs erstellen – entweder durch Code oder durch Exportieren einer typischen Kreation aus einer speziellen Zeichen-App. Da sie enger mit der Entwicklung des Internets verknüpft sind, nimmt die Akzeptanz zu.

Die Nachteile skalierbarer Vektorgrafiken

Allerdings ist nicht alles rosig. SVGs haben immer noch einige Probleme, die Sie beachten sollten:

• Die Technologie entwickelt sich im Gegensatz zu den meisten anderen zentralen Webaspekten. Da viele Menschen viel von Scalable Vector Graphics erwarten, gibt es eine „Lücke“ zwischen dem, was Sie tun können , und dem, was Sie tun möchten .
• Während die grundlegende SVG-Unterstützung in den meisten Browsern verfügbar ist, ist der vollständige Funktionsumfang je nach verwendetem Browser immer noch nicht verfügbar. Auch hier haben SVGs mehr Potenzial, das noch nicht offensichtlich ist: Wir brauchen eine bessere Browserunterstützung für erweiterte Funktionen, um zu sehen, wozu das Format in der Lage ist.
• In einigen Fällen stellen Sie möglicherweise fest, dass SVG-Bilder weniger genau sind oder einfach falsch aussehen. Dies liegt daran, dass Sie sich darauf verlassen müssen, dass eine Website wie erwartet geladen wird. Wenn Sie sich an eine Zeit erinnern, in der Sie eine Webseite aufgrund von Fehlern neu laden mussten, stellen Sie sich dies nur mit Ihren SVG-Bildern vor.

Wir würden auch sagen, dass es in einigen Fällen auch schwieriger ist, SVGs ohne Programmierkenntnisse zu erstellen. Deutlich besser ist die Unterstützung in Grafikprogrammen wie Affinity Designer und Adobe Illustrator. Es gibt auch Unterstützung für den SVG-Export in Apps wie Google Drawing:

Dies ist ein sich verbessernder Bereich, liegt aber im Vergleich zu anderen Bildformaten immer noch leicht zurück.

Trotz dieser Nachteile können Sie dagegen vorgehen. Für die grundlegende Verwendung können Sie sie sicherlich fast sofort implementieren. Tatsächlich bietet WordPress diese Unterstützung sogar in wenigen Schritten an, und wir werden dies als Nächstes besprechen.

So verwenden Sie SVGs auf Ihrer WordPress-Website

Die schlechte Nachricht ist, dass Sie, wenn Sie ohne Arbeit eine SVG-Datei in WordPress hochladen möchten, dies nicht können. Ein zusätzliches Problem bei der aktuellen Unterstützung für skalierbare Vektorgrafiken ist, dass WordPress das Hochladen dieser Bilder aus Sicherheitsgründen standardmäßig nicht zulässt:

Die Gründe sprengen den Rahmen dieses Artikels. Kurz gesagt, da das SVG-Format eher ein Dokument als ein tatsächliches Bild ist, könnte ein böswilliger Benutzer potenzielle Skriptangriffe einbauen. Das bedeutet, dass Sie eine sicherere Alternative finden müssen.

An anderer Stelle im Internet werden Sie auf Anweisungen stoßen, um Code zu Ihrer Datei functions.php hinzuzufügen, um SVG-Uploads zu ermöglichen. Wir werden diesen Schritt jedoch nicht durchführen, da wir nicht garantieren können, dass er sicher ist. Stattdessen können Sie das tun, was Sie oft mit WordPress tun würden: Wenden Sie sich an ein Plugin. Wir empfehlen SVG-Unterstützung:

Sobald Sie das Plugin installiert und aktiviert haben, gehen Sie in WordPress zum Bildschirm Einstellungen > SVG-Unterstützung. Dadurch werden Ihnen einige Bildschirme angezeigt, aber Sie müssen nur das Kontrollkästchen Auf Administratoren beschränken? aktivieren. Kontrollkästchen im Bereich Einstellungen.

Standardmäßig lässt das Plugin alle Benutzer SVGs hochladen. Dies könnte aufgrund der inhärenten Sicherheitsprobleme eine schlechte Nachricht sein, und genau aus diesem Grund lässt WordPress Sie diese Dateien überhaupt nicht hochladen. Wenn Sie dieses Kästchen jedoch ankreuzen, beschränkt das Plugin das Hochladen nur auf Site-Administratoren und macht die Verwendung von SVGs standardmäßig sicherer.

Zusammenfassend

Es gibt viele Möglichkeiten, Bilder im Internet anzuzeigen, und die meisten Leute denken nicht zweimal über das Format nach, das sie verwenden. Wenn Sie sich jedoch die Zeit nehmen, das Format den Anforderungen anzupassen, erhalten Sie detaillierte und scharfe Bilder, die auf allen Bildschirmen umwerfend aussehen.

In diesem Beitrag haben wir viele Informationen über skalierbare Vektorgrafiken bereitgestellt. Sie passen das Bild mit CSS an Ihre Bedürfnisse an, und der Spielraum für Manipulationen ist viel größer als bei PNGs und JPEGs. Außerdem sind sie leicht – also perfekt für kleine Bildschirme und schlechte Internetverbindungen.

Möchten Sie skalierbare Vektorgrafiken auf Ihrer Website verwenden, und wenn ja, hilft Ihnen dieser Artikel? Lassen Sie es uns im Kommentarbereich unten wissen!

Bildnachweis: GDJ.