Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

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

Werbung

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


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.

Werbung

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.

Werbung

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


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.

Werbung

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.


Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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

Arbeitsschritte 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.

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.

boxy-svg_viewFolgendes 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!

SVG
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.

bplaced

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'.

boxy-svg_viewport

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-April