figbell

Alle Artikel

Anleitungen

Aus einem Logo einen Symbolsatz, ein Favicon und SVG für das Web erzeugen

Mit Bezira aus einem SVG-Logo PNG-Symbole von 16 bis 512 Pixeln, eine favicon.ico und optimiertes SVG erzeugen. Der Export erfolgt auf dem Gerät.

Eine Website oder eine Anwendung braucht dasselbe Logo in vielen Größen: das Tab-Symbol, das Symbol für den Startbildschirm, das SVG auf der Seite. Bezira erzeugt all das aus einem einzigen Exportfenster; die Verarbeitung erfolgt auf diesem Gerät.

Vorbereitung

  1. Öffnen Sie die SVG-Datei des Logos mit Datei › Öffnen … (Strg/⌘ O). Die Datei wird unverändert geöffnet; IDs, Definitionen und Stile bleiben erhalten.
  2. Symbole werden als quadratische PNGs erzeugt. Ist das Logo nicht quadratisch, kann mit Objekt › Zeichenfläche hinzufügen eine quadratische Fläche angelegt werden; im Fenster gibt es vordefinierte Größen wie App-Symbol (512×512).

Symbolsatz und favicon.ico

  1. Öffnen Sie das Fenster Datei › Exportieren (Strg/⌘ ⇧ E).
  2. Wählen Sie im Abschnitt Umfang die Option Gesamtes Dokument, Jede Zeichenfläche einzeln oder Nur Auswahl.
  3. Aktivieren Sie im Abschnitt Formate den Symbolsatz und wählen Sie die gewünschten Größen: 16, 24, 32, 48, 64, 128, 256 und 512.
  4. Wählen Sie auch die Schaltfläche favicon.ico. Die Datei enthält die Größen 16, 32 und 48 Pixel.
  5. Prüfen Sie die Liste Erzeugte Dateien und klicken Sie auf Exportieren.

In Chrome, Edge und Opera werden die Dateien mit Ordner wählen direkt in einen Ordner geschrieben. Wird kein Ordner gewählt oder kann der Browser nicht in einen Ordner schreiben, werden mehrere Dateien als eine einzige .zip-Datei heruntergeladen.

Kleines SVG für das Web

Wird im selben Fenster SVG aktiviert und Optimiert gewählt, werden überflüssige Attribute, leere Gruppen und überzählige Nachkommastellen entfernt. Optionen:

  • Ebenennamen als id beibehalten: für Elemente, die mit CSS oder Skripten angesprochen werden sollen.
  • Minimieren (eine Zeile): bringt die Datei auf eine einzige Zeile.
  • Farben als currentColor (Symbole): Das Symbol übernimmt die Textfarbe der Seite.
  • Nachkommastellen: zwischen 0 und 3 Stellen.

Das Fenster zeigt die Größe des ursprünglichen SVG; die Optimierung verändert das Aussehen nicht. Um das Dokument später erneut zu bearbeiten, verwenden Sie die Option Bearbeitbar: Ebenen, Gruppen und Zeichenflächen bleiben erhalten.

Gut zu wissen

  • Adobe-Illustrator- (.ai), EPS- und PDF-Dateien lassen sich nicht öffnen; das Logo muss als SVG vorliegen.
  • Text in Pfade umwandeln und Text auf einem Pfad gibt es nicht.
  • Skripte, Ereignisattribute und externe Verweise in einer geöffneten Datei werden aus Sicherheitsgründen entfernt; die Anzahl der entfernten Elemente wird gemeldet.

Bezira öffnet sich sofort im Browser.