Boxy SVG task
vom Anfänger für Anfänger

Einfacher, gelobter SVG Editor (Boxy SVG) um gut €10,- . Gebrauchsanweisung? – hier ein Tutorial(Google Übersetzer), welches mit Boxy SVG vorzeigt … Wer kein Blitzmerker, muss es lernen – wer mit Bildbearbeitungsprogramm versiert, von Vorteil.

* … aber vorerst bleibt es bei den Anfängen? –,  die Fortsetzung des Kurses lässt auf sich warten: weiterführend wünschen wir der Person des Kurses „frischen Schwung!“

Arbeitsschritte mit Boxy SVG

Der Vektorgrafik einen Hintergrund für Titelbild erstellen

Dem Titelbild diesen Beitrags ⇔ (SVG-Format, 1KB) ist über Boxy SVG (s. evtl. SVG Kennenlernen) die Viewbox 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

  • View (re. Seitenleiste, unterbrochene Quadratsymbol) „View box“ und „Viewport“ jeweils auf Width 1038 px und Height 576 px (Themespezifisch) einstellen.
  • Arrangement (re. Seitenleiste, Kreuz mit den Pfeilen), unter Auswahl des Icons, über „Align“ / „Actions“ in Mitte setzen.
    • Mit halten der Shifttaste und ziehen lässt sich das Icon im korrekten Verhältnis zur erwünschten Größe anpassen.
  • Danach sollte man das Ganze etwas auszoomen.
  • Quadrat (li. Seitenleiste) auswählen und über die gesamte Viewbox ziehen. Die Bildfläche ist nun grau.
  • Objects ( 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 Icon wieder sichtbar.
  • Den Hintergrund über Füllen (re. Seitenleiste, das obere Symbol mit dem Pinsel), evtl. vorhergehender Auswahl, einfärben.
  • Zur Sichtung des Ergebnis, Export (re. Seitenleiste, Quadrat mit Pfeil nach re. o.) unter „Preview“ → „Generate“ anklicken.

… hiermit ist die Bildfläche für das Icon erstellt und der schraffierte Hintergrund im Titelbild verschwunden :-)

Vektorgrafik besteht aus mehren Teilen? – und bedarf nach Erweiterung View Box der Justierung Mitte.
Diesem Bild ist nach Erweiterung View Box und ersten Versuchs die Vektorgrafik zu zentrieren, anzusehen, aus wie vielen Einzelteilen es besteht :- |

Diese Vektorgrafik beispiels-, Titelbildnis ⇔ um es Mittig darzustellen bedarf Folgendes:

Boxy SVG Werkzeugleiste (Toolbar, Toolbox) unter Edit „Select All“ anklicken und wie oben beschrieben, Arrangement (re. Seitenleiste, Kreuz mit den Pfeilen) das Bild über „Align“ / „Actions“ in Mitte ausrichten.

Titelbild hat gestrichelten Rand?

Vektorgrafik Titelbildnis ⇔, welches links und rechts mit gestricheltem Rand visualisierte, erfolgt der nächste Arbeitsgang:

  • Re. Seitenleiste Geometrie (Dreieck). Unter „Objekt“ das X-Y-Raster reduzieren: x/-2 und y/-2 und Width/Height je 4 px mehr als in „View box“ (diesem Beispiel View box Width 1038 px und Height 576 px, also Width 1042 und Height 580).

Dieser Einstellung war das Missfallen im Titelbild behoben.

Weiteres Beispiel eines Titelbildnis

Interessant ist das Titelbild der Schärfe ⇔ hervorzuheben. Dieses 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 konvertiert durch Download wie von selbst in JPG-Format.
  • Das Bild in Boxy SVG geöffnet – das JPG-Bild wird von Boxy SVG in Base64 Code umgewandelt und hat somit 1 MB.

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

Nächst Beispiel zum SVG-Bild welches Bildschirmfoto PNG-Format beschnitten und gewandelt in JPG-Format über Boxy SVG mithin base64 in ein SVG-Format konvertiert wurde. 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) weg nehmen könnte.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. – und nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.