SVG-Optimierungspraktiken beim Zeichnen in Illustrator

Ich habe festgestellt, dass beim Exportieren einer Datei von AI nach SVG viel Code erstellt wird, der nicht erforderlich ist, und ich habe dann festgestellt, dass dieser Code sicherlich optimiert werden kann.

Habe dieses interessante SVG-Optimierungstool gefunden:

http://petercollingridge.appspot.com/svg_optimiser

Ich habe auch festgestellt, dass die folgenden Praktiken die Leistung Ihrer endgültigen Animation verbessern können:

  • Verwendung vordefinierter Formen in SVG wie Kreise, Ellipsen, Quadrate, Rechtecke und Polygone anstelle von Pfaden.

  • Reduzieren der Menge an Kurven und Ecken bei der Verwendung von Pfaden.

  • Wählen Sie beim Exportieren von AI nach SVG die Option „Präsentationsattribute“, damit sich Stile innerhalb des SVG-Tags befinden, anstatt sie mit einer externen CSS-Datei zu verknüpfen.

Meine Frage ist jetzt:

Welche anderen Aspekte müssen bei der Arbeit mit Illustrator berücksichtigt werden, um die endgültige Leistung einer SVG-Animation zu verbessern?

Vielen Dank.

Ich weiß nicht, ob es mit animierten SVGs funktioniert, aber SVGOMG ist großartig für die SVG-Optimierung.
Das vordefinierte Ding funktioniert nicht sehr gut, wenn man Sachen in Illustrator macht.

Antworten (2)

Hier sind ein paar einfache Dinge, die Sie in Illustrator tun können, um die Dateigröße gering zu halten:

  • So viele Formen wie möglich zusammenführen.
  • Erweitern von Pfaden, wenn Sie einen Pfad anstelle einer Form verwenden müssen.
  • Reduzieren der Dezimalstellen auf 1. Dies ist in den erweiterten Optionen in Illustrator zu finden, wenn das Bild als SVG gespeichert wird.
  • Bewahren Sie auch keine KI-Bearbeitungsfunktionen auf.
  • Vermeiden Sie jegliche Art von Illustrator- oder Photoshop-Effekten.

Ich unterstütze alles in HandsomePhils Antwort und würde hinzufügen:

  • Heben Sie die Gruppierung von Elementen auf, wenn Sie bei der Arbeit mit Ihrem SVG nicht auf die Gruppen verweisen müssen. Dadurch werden zusätzliche <g>Tags eliminiert.
  • Begrenzen Sie die Anzahl der Farben.
  • Passen Sie die Zeichenfläche an die Grenzen der Grafik an (Objekt > Zeichenflächen > An Grafikgrenzen anpassen in CS5).
SVG-Optimierungspraktiken beim Zeichnen in Illustrator
AntwortenHierDatenschutz-Bestimmungen1y, 0v