Ich habe eine Karte in AI erstellt, aber die Dateigröße ist RIESIG als SVG?

Ich habe ein SVG in Illustrator erstellt, aber jetzt möchte ich es in einer Website/App verwenden, aber es ist sehr groß (ca. 10 MB). Wie kann ich die Größe verringern? Meine Illustrator-Datei ist ziemlich groß, aber das liegt daran, dass ich darunter einige Zeichenelemente habe. Die Datei hat auch eine große Zeichenfläche, aber sollte ich beim Speichern meine Pauselemente löschen und die Größe der Zeichenfläche verringern?

Haben Sie versucht, das SVG zu komprimieren? Aber ja, SVG ist super ausführlich, also erwarten Sie, dass es wie ein Lauffeuer wächst.
Kannst du weitere Informationen zu der Grafik geben? Es kann sinnvoller sein, es als PNG zu exportieren, wenn es so detailliert ist. SVG eignet sich am besten für einfache Vektorzeichnungen mit Volltonfarben oder sanften Farbverläufen.

Antworten (2)

Ja, Sie sollten alle zusätzlichen Elemente löschen, bevor Sie Ihr SVG speichern. Und wie komplex ist Ihre Karte? SVGs funktionieren normalerweise am besten ohne Farbverläufe, Schnittmasken oder zusätzliche Effekte wie Schlagschatten. Wenn Sie die Details beibehalten müssen, warum speichern Sie nicht einfach aus Illustrator als PNG für das Web?

Meine Größe beträgt also jetzt 448 KB. Großer Schritt nach unten von 10 MB. Ich habe keine Schnittmasken (glaube ich) und keine verrückten Effekte. Super einfach. Gibt es eine Möglichkeit, es in Illustrator so einfach wie möglich zu speichern?
Ich würde sagen, mit einer Datei von 448 KB sind Sie möglicherweise so niedrig, wie Sie es bekommen können. Wenn Sie die Datei auf die grundlegendsten Einstellungen beschränken möchten, sollten Sie versuchen, sie in Illustrator 3 (nicht "cs" 3) ODER einer älteren Version eines .eps-Dateityps zu speichern. Stellen Sie sicher, dass Sie auf Speichern unter klicken , und wählen Sie bei der Auswahl der Version die älteste mögliche aus. Möglicherweise erhalten Sie eine Warnung, dass einige erweiterte Effekte oder Farbverläufe möglicherweise abgeflacht sind, und dies ist in Ordnung. Probieren Sie es aus. Ansonsten denke ich, dass Sie fertig sein sollten.

Ich bin mit Illustrator CC-2014 mehrmals darauf gestoßen und werde das Folgende als Beispiel verwenden:

Nur ein paar Formen, Farben und Hilfslinien.

Geben Sie hier die Bildbeschreibung ein

File -> Save AswählenSVG (svg)

Geben Sie hier die Bildbeschreibung ein

Nach der Auswahl von SVG erscheint ein Optionsfeld, wählen Sie also SVG Code...:

Geben Sie hier die Bildbeschreibung ein

Der Code wird entweder in Ihrem Standard-Code-Editor ausgegeben oder eine TXT-Datei geöffnet:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 713 956" enable-background="new 0 0 713 956" xml:space="preserve">
<g id="Layer_1">
    <path fill="#F1F2F2" stroke="#000000" stroke-miterlimit="10" d="M472.5,359.6c-82,0-148.5-66.5-148.5-148.5
        c0-16.7,2.8-32.8,7.9-47.9c-9.4-1.1-18.9-1.6-28.5-1.6c-138.9,0-251.5,112.6-251.5,251.5s112.6,251.5,251.5,251.5
        s251.5-112.6,251.5-251.5c0-25.1-3.7-49.3-10.5-72.2C523.1,352.9,498.6,359.6,472.5,359.6z"/>
</g>
<g id="Layer_2">
    <circle fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" cx="488.3" cy="638.9" r="148.5"/>
</g>
<g id="Layer_3">
</g>
</svg>

Wenn Sie anhand des obigen Codes bemerken, dass ich drei Ebenen habe, und sie sind Layer_1, Layer_2und Layer_3. In diesem Fall wurden die Anleitungen nicht ausgegeben, aber manchmal habe ich es so gesehen, als id="guide"ob ich mich erinnere.

Ich würde den Code auf diesen kürzen:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 713 956" enable-background="new 0 0 713 956" xml:space="preserve">
<g id="Layer_1">
    <path fill="#F1F2F2" stroke="#000000" stroke-miterlimit="10" d="M472.5,359.6c-82,0-148.5-66.5-148.5-148.5
        c0-16.7,2.8-32.8,7.9-47.9c-9.4-1.1-18.9-1.6-28.5-1.6c-138.9,0-251.5,112.6-251.5,251.5s112.6,251.5,251.5,251.5
        s251.5-112.6,251.5-251.5c0-25.1-3.7-49.3-10.5-72.2C523.1,352.9,498.6,359.6,472.5,359.6z"/>
</g>
<g id="Layer_2">
    <circle fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" cx="488.3" cy="638.9" r="148.5"/>
</g>
</svg>

und das obige SVG kann als Bild in Ihren Dateien aufgerufen werden.

Das ist eine Möglichkeit, aber ich habe eine andere gelernt und getestet. In meinen XHTML-Dateien kürze ich es wie folgt bis zum SVG selbst:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path fill="#F1F2F2" stroke="#000000" stroke-miterlimit="10" d="M472.5,359.6c-82,0-148.5-66.5-148.5-148.5
        c0-16.7,2.8-32.8,7.9-47.9c-9.4-1.1-18.9-1.6-28.5-1.6c-138.9,0-251.5,112.6-251.5,251.5s112.6,251.5,251.5,251.5
        s251.5-112.6,251.5-251.5c0-25.1-3.7-49.3-10.5-72.2C523.1,352.9,498.6,359.6,472.5,359.6z"/>
    <circle fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" cx="488.3" cy="638.9" r="148.5"/>
</svg>

ABER seien Sie sich bewusst, dass ich nach einigen Tests festgestellt habe, dass das <svg>Tag in eine eingeschlossen werden sollte <div>. Auf diese Weise wird der Code gespart und ich kann ihn auf diese Weise leicht animieren.

Ergebnis in Chrome:

Geben Sie hier die Bildbeschreibung ein

Ich habe eine Karte in AI erstellt, aber die Dateigröße ist RIESIG als SVG?
AntwortenHierDatenschutz-Bestimmungen1y, 0v