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,-.
… 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
Der Vektorgrafik einen Hintergrund für Titelbild erstellen
Dem Titelbild dieses Beitrags ⇔ (SVG-Format, 1 KB) ist über Boxy SVG (SVG s. evtl. SVG Kennenlernen) die Ansichtsbox erweitert, da sonst die gesamte Bildfläche nicht ausgefüllt ist. – sowie Hintergrund für die Vektorgrafik als Titelbild angebracht ist, da ja ansonsten die Schraffierung der Box für Titelbild 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 schraffierte Hintergrund im Titelbild verschwunden 🙂
Vektorgrafik zentrieren
Die Vektorgrafiken bestehen meist aus mehreren Teilen. Bspw. nach der Erweiterung von View Box bedarf es der Justierung Mitte.
Diesem Bild nach Erweiterung View Box und ersten Versuchs die Vektorgrafik zu zentrieren, ist anzusehen, aus wie vielen Einzelteilen es besteht :- |
Diese Vektorgrafik beispiels-, Titelbildnis ⇔ brauchte es einer Erweiterung des Hintergrunds.
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.
Folgendes ist heute meist hinfällig, da der App schon längst dieser Button hinzugefügt wurde →
Aber Browser Safari zeigt dem SVG Titelbild nach wie vor und meistens einen Rand an!
Das Titelbild zeigt das Problem der SVG mit Rand.
Das Titelbild oben zeigt eine Vektorgrafik, die in Safari links und rechts mit einem gestrichelten Rand visualisiert. Es ist jedoch zu beachten, dass in diesem Fall kein tatsächlicher gestrichelter Rand vorhanden ist, sondern lediglich eine Linie links und rechts.
Da hier der Hintergrund für Titelbilder entfernt wurde, der aus einem background-image besteht. Ja, warum wurde das entfernt: Diese Darstellung tritt insbesondere bei der Verwendung von Safari auf, da Vektorgrafiken dort unbeabsichtigt etwas opak erscheinen können. Dies führte dazu, dass der schraffierte Hintergrund durchschien. Daher habe ich 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;
}
Nächst beachte ich folgenden Arbeitsgang:
Den Hintergrund der Vektorgrafik einfach so um 5-10 Pixel erweitern 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 der Rand dabei ist und farblich entsprechend dem Hintergrund angepasst ist, bleibt das Problem mit den Rändern, genauso wie es dem Beispiel unseres Titelbildes zu sehen ist in Safari.
Weitere Beispiele so als Anfänger
Es gibt performantere Workflows, als das Folgende hier gezeigt wird. – von damals als Anfänger eben.
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, der Link ist nicht mehr aktuell) 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 'Responsiver' / '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.
Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.
Hinweis: Unsere Website verwendet ausschließlich funktionale Cookies und setzt keine Cookies von Drittanbietern.
Aber hallo!
– zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Technische Herausforderungen sind Teil des Website-Betriebs. Wir interessieren uns dafür, wie du mit solchen Problemen umgehst. Bitte teile uns mit, ob du bereits technische Probleme auf deiner Website hattest und wie du sie gelöst hast.
Wird geladen ...
Während deines Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
Folgendes ist heute meist hinfällig, da der App schon längst dieser Button hinzugefügt wurde →
