WordPress Logo im SVG-Format

SVGs sind eine feine Sache, wenn es um Grafiken geht, die „automatisch“ skalieren sollen, ohne dabei die Qualität des Bildes zu beeinflussen. In Zeiten von HighDPI Bildschirmen ein immer mehr populäres Hilfsmittel.

SVG is a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.

W3C: About SVG

Wie sich schon rumgesprochen hat (ich berichtete), hat sich eine Gruppe von WordPress Contributor unter der Leitung von Matt als Ziel eine neues, moderneres Admin Design zu entwickeln gesetzt. Ein Schwerpunkt der Umgestaltung sind die Icons. Die neuen Icons sollen nicht im gewöhnlichen PNG Format gestaltet sein, sondern ebenfalls auf das SVG Format gesetzt werden.
Bis „MP6“ in den Core gelangt und wir in den Genuss der Grafiken kommen, dauert es noch ein Weilchen.

WordPress Logo

Das Plugin MP6 bringt eben aufgrund des neuen Formats auch das WordPress Logo als Vektorgrafik mit. Allerdings als Inline Image in Base64 kodiert.

.wp-badge {
background-color: #0074a2;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……OTQsMjMuMjE1LDI4LjQzNHoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==);
background-position: center 30px;
background-repeat: no-repeat;
background-size: 110px 110px;
}

Ich habe den Base64 Code mal dekodiert und anschließend die SVG Datei angepasst, damit es unter dem Opera Browser zu keinen Darstellungsproblemem kommt. (Fixe Höhe und Breite waren definiert, was Opera anscheinend nicht mag.)
Um noch ein wenig an Bytes zu sparen, wurde die Datei einmal durch SVGO gejagt, wodurch nochmal 30% gespart werden konnten.

Das Ergebnis habe ich hier mal eingebunden. Zum Speichern entweder Rechtsklick -> Bild speichern oder den anschließenden Download nutzen. (Lizenz: Wie das Plugin und WordPress selbst: GPLv2 or later)

WordPress Logo als Vektor im SVG Format

Download
ZIP

Zum Thema

One thought on “WordPress Logo im SVG-Format”

Leave a Reply