Boxy SVG task zum Erfolg – Ein Aufgabenpfad für Anfänger

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

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.

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.

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

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.

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.

Die Welt des Webdesigns und der Grafikerstellung hat in den letzten Jahren einen bedeutenden Wandel erlebt, und Scalable Vector Graphics (SVG) haben sich dabei als unverzichtbare Ressource erwiesen. Ein herausragendes Werkzeug, das in diesem Bereich Beachtung findet, ist das "Boxy SVG". Sowohl für Anfänger als auch für professionelle Webdesigner und Web-Entwickler.

SVG bietet eine Vielzahl von Vorteilen, darunter Skalierbarkeit, Interaktivität und eine breite Browserunterstützung. Doch wie maximiert man das volle Potenzial von SVG? Hier kommt "Boxy SVG" ins Spiel – ein leistungsstarkes Tool zur Erstellung und Bearbeitung von SVG-Grafiken.

Einfacher, gelobter SVG Editor, das ist das Boxy SVG. Der erste Hinweis sollte auf die Website von https://boxy-svg.com/ zeigen und das Tutorial hervorzuheben. Hier ist das Programm auch Online möglich und sich mit dem Programm anzufreunden.
Im Weiter ist es allemal vorteilhaft, Boxy SVG auf den Computer zu installieren. Das ist für Windows, Apple und Linux vorhanden, zu einem Preis, das es per se Wert ist, auch weil Boxy SVG ständig verbessert wurde samt Übersetzung und behält doch seine Leichtigkeit bei. Boxy SVG. (Mac App Store) im heute so um die €23,-.

Pluspunkte kriegt Boxy SVG in Sachen Bedienung. Der einfache SVG Editor ist an keiner Stelle überladen und bringt trotzdem alle Funktionen mit, die ein SVG Editor haben sollte. Genau das, was viele Web Worker eben brauchen.

(SVG s. evtl. SVG Kennenlernen.)

… Wer kein Blitzmerker, muss es lernen – wer mit Bildbearbeitungsprogramm versiert, von Vorteil.

Im Folgenden sind die Schritte, die ich zu Beginn ermittelt habe. Das ist also keine ausführliche Beschreibung zum Workflow mit Boxy SVG und nur so punktuell hilfreich.

Inhaltsverzeichnis

Arbeitsschritte mit Boxy SVG

Vektorgrafik zentrieren
Der Vektorgrafik einen Hintergrund für Titelbild erstellen.
Titelbild hat gestrichelten Rand?
Weitere Beispiele
Export, responsive oder fixe Größe?

Vektorgrafik zentrieren

Die Vektorgrafiken bestehen meistens aus mehreren Teilen. Bspw. nach der Erweiterung von View Box bedarf es der Justierung Mitte.

Dieser Vektorgrafik beispiel-, Titelbildnis ⇔ brauchte es einer Erweiterung des Hintergrunds.

Diesem Bild nach Erweiterung View Box und ersten Versuchs, die Vektorgrafik zu zentrieren, ist anzusehen, aus wie vielen Einzelteilen es besteht :- |

Um das dann mittig darzustellen, bedarf es Folgendes:

Boxy SVG Werkzeugleiste (Toolbar, Toolbox) unter Bearbeiten "Alles auswählen" anklicken.
Dann Anordnung (re. Seitenleiste, Kreuz mit den Pfeilen) das Bild über in Mitte ausrichten.

Der Vektorgrafik einen Hintergrund für Titelbild erstellen

Dem Titelbild dieses Beitrags ⇔ (SVG-Format, 1 KB) ist über Boxy SVG die Ansichtsbox erweitert, da sonst die gesamte Bildfläche nicht ausgefüllt ist. Sowie ein Hintergrund für die Vektorgrafik angebracht ist, da ja ansonsten der vom Theme vorgegebene Hintergrund (Schraffierung) durchscheint.

Viewbox erweitern und Hintergrund erstellen

Geometrie [re. Seitenleiste, rechtwinklige Lineal] das "Ansichtsbox" auf Breite 1038 px und Höhe 576 px (Themes-spezifisch) einstellen.
Anordnung [re. Seitenleiste, Kreuz mit den Pfeilen (vier-wege-pfeil)], unter Auswahl des Icons, über "Zentrieren" in Mitte setzen.
- Halten der Shifttaste und ziehen, lässt sich das Icon im korrekten Verhältnis zur Größe anpassen.
Danach sollte man das Ganze etwas aus zoomen.
- hinein zoomen, Tastenkombination Shift und *
- heraus zoomen, allein mit Taste -
- auf Standard zurücksetzen <
- Alle Ansichten in Fenster einpassen 1
- Alle Objekte in Fenster einpassen 2
- Ausgewählte Objekte in Fenster einpassen 3
Quadrat [li. Seitenleiste] auswählen und über die gesamte Viewbox ziehen. Die Bildfläche ist nun grau.
Objekte [re. Seitenleiste, Stapelsymbol] anklicken und die unterste Auszeichnung hinaus über die vorhergehende schieben (ergo über die Bearbeitungsfläche dessen nach oben ziehen). Somit ist das Bild wieder sichtbar.
Den Hintergrund über Füllung [re. Seitenleiste, das obere Symbol mit breitem Pinsel], vorhergehender Farbauswahl, einfärben.
Zur Sichtung des Ergebnisses, Export [re. Seitenleiste, Quadrat mit Pfeil nach rechts oben] unter "Preview" → "Generieren" anklicken und, unten, über Export abspeichern.

… hiermit ist die Bildfläche für das Icon erstellt und der vom Theme vorgegebene schraffierte Hintergrund verschwunden :-), den meisten Browsern. Weiter, nächst Überschrift "Titelbild hat gestrichelten Rand?" das Problem mit Safari.

Titelbild hat gestrichelten Rand?

Siehe Browser Safari, Coverbilder und SVG. Das Problem hat nichts mit Boxy SVG selbst zu tun und ist auf Safari beschränkt.

Anmerkung: Der Button 'View' ist hilfreich, um die Ansicht abzugrenzen. →

Aber Browser Safari zeigt dem SVG Titelbild nach wie vor und meistens einen Rand an!

Das Titelbild zeigt das Problem der SVG mit Rand.

Gleich zwei Probleme ergeben sich in Safari, das mit der Deckkraft und der Rand.

Dem Beispiel zeigt das Titelbild eine Vektorgrafik, die in Safari links und rechts mit einem gestrichelten Rand ist. Es ist jedoch zu beachten, dass hier der Website kein tatsächlicher gestrichelter Rand ist, sondern lediglich eine Linie links und rechts: weil der vom Theme vorgegebene schraffierte Hintergrund entfernt wurde, der aus einem background-image besteht. Ja, warum wurde das entfernt: Diese Darstellung tritt bei der Verwendung von Safari auf, da Vektorgrafiken dort unbeabsichtigt etwas 'opacity' erscheinen. Dies führte also dazu, dass der schraffierte Hintergrund durchschien. Daher habe ich hier im Theme Twenty Fourteen den Hintergrund des Titelbildes entfernt, um dieses Problem zu beheben.

/* Titelbild Hintergrund entferen von wegen Safari  */
.post-thumbnail {
    background-image: none !important;
}

Damit ist das SVGs von wegen der Deckkraft in Safari gelöst, aber ein Rand ist trotzdem vorhanden.

Nächst beachte ich folgenden Arbeitsgang:

Den Hintergrund der Vektorgrafik einfach so um 5-10 Pixel erweitern (je der Breite und Höhe, weil der Rand auch oben erscheinen kann) und mittels Anordnung (re. Seitenleiste, Kreuz mit den Pfeilen) das Bild über in Mitte ausrichten. Die Viewbox sollte vor dem Speichern hinzugefügt werden. Dieser Einstellung hatte die heikle Aufgabe im Titelbild behoben. Beachte, auch wenn der SVG ein Rand dabei ist und farblich entsprechend dem Hintergrund angepasst würde, bleibt das Problem mit den Rändern, genauso wie es dem Beispiel unseres Titelbildes zu sehen ist in Safari.

Weitere Beispiele

Es gibt performantere Workflows …

Es ist interessant, das Bild im Titelbild der Schärfe zu zeigen. Das mit der Schärfe ist mir nur über SVG-Format gelungen.

Das Bild ist als Bildschirmfoto im PNG-Format (Bildgröße 2880 x 1800, 792 KB) erstellt.
Über iLoveIMG "Bild zuschneiden". Durch den erwünschten Ausschnitt hat sich eine Bildgröße von 2574 × 1448 mit 460 KB ergeben. Das PNG-Bild konvertierte durch Download wie von selbst in JPG-Format.
Das Bild in Boxy SVG geöffnet – das JPG-Bild von Boxy SVG in SVG abgespeichert und hat somit 1 MB.

Die Schärfe für das Bild war es mir wert, dies zu probieren. Eine weitere Kompression vom SVG-Format des Bildes von wegen base64 Codes ohne Wirkung.

Dieses Bild hat durch weniger Formen und Buchstaben nur 127 KB und ließe sich evtl. noch verringern, indem die störenden Ringe um die Schrift im hellen Bereich (bei starker Vergrößerung sichtbar) wegnehmen könnte.

Es gibt auch noch ein Beispiel, welches im SVG ein GIF integriert hat und dieses Bild kommt auf 3 MB.

Der Bildautor ist nicht präsent (von Alex Mao, Link ist nicht) und von mir variiert, und da ist das nur mittig die Pyramide rotierend und ist von GIFER.COM. (Bitte beachte, dass Browser 'Safari' das GIF, welches im SVG eingebettet ist, möglicherweise nicht konform darstellt.)

Details: Das Bild hat eine Größe von 3 MB. Zunächst musste der Ausschnitt für das GIF bewerkstelligt werden. Dazu wurde das JPG-Bild in das PNG-Format konvertiert und der Ausschnitt bewerkstelligt. Danach wurde das GIF hinter das Bild platziert und ein Rahmen hinzugefügt, um das Bild sauber abzugrenzen. Schließlich sollte das gesamte Bild unter Verwendung der Funktionen des GIFs im SVG-Format gespeichert werden.

Export, responsive oder fixe Größe?

Im Export gibt es zur Abspeicherung die Option 'Responsive' / 'Fester'.

Normalerweise ist mit 'Responsiver' abzuspeichern. Wenn aber eine ganz bestimmte Größe gebraucht wird?

So ist das SVG vorab genau auf die erwünschte Größe anzupassen.
Danach, vor dem 'Generate' und 'Export', auf 'Fester' einzustellen.

Gerade hier ist bspw. das SVG-Icon als Aufzählungszeichen (Methode mit list-style-image). Dieses ist genau der Größe einzurichten, welche das Icon haben muss, und in 'Fester' abzuspeichern.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Juni