Я сделал карту в AI, но размер файла ОГРОМНЫЙ как svg?

Я сделал svg в Illustrator, но теперь я хочу использовать его на веб-сайте/в приложении, но он имеет огромный размер (около 10 МБ), как я могу уменьшить его размер? Мой файл иллюстратора довольно большой, но это потому, что под ним есть некоторые элементы трассировки. В файле также есть большая монтажная область, но при сохранении следует ли удалять элементы трассировки и уменьшать размер монтажной области?

Вы пробовали сжимать SVG? Но да, svg очень многословен, так что ожидайте, что он будет расти как лесной пожар.
Можете ли вы дать больше информации о графике? Возможно, имеет смысл экспортировать его в формате PNG, если он настолько детализирован. SVG лучше всего подходит для простых векторных рисунков со сплошными цветами или плавными градиентами.

Ответы (2)

Да, вы должны удалить все лишние элементы, прежде чем сохранять свой svg. И насколько сложна ваша карта? Svg обычно работают лучше всего без градиентов, обтравочных масок или дополнительных эффектов, таких как тени. Если вам нужно сохранить детали, почему бы просто не сохранить для Интернета из Illustrator в формате png?

Итак, мой размер теперь 448 КБ. Большой шаг вниз от 10 МБ. У меня нет обтравочных масок (кажется) и сумасшедших эффектов. Супер базовый. Есть ли способ сохранить его в иллюстраторе, чтобы он был как можно более простым?
Я бы сказал, что с файлом размером 448 КБ вы можете получить его настолько низко, насколько сможете. Если вы хотите обрезать файл до самых основных настроек, вы можете попробовать сохранить его в Illustrator 3 (не «cs» 3) ИЛИ в более старой версии файла типа .eps. Убедитесь, что вы нажали «Сохранить как» , и при выборе версии выберите самую старую из возможных. Вы можете получить предупреждение о том, что некоторые расширенные эффекты или градиенты могут быть сглажены, и это нормально. Попробуйте. В противном случае, я думаю, вы должны быть готовы.

Я сталкивался с этим несколько раз в Illustrator CC-2014, и в качестве примера я буду использовать приведенное ниже:

Всего несколько форм, цветов и направляющих.

введите описание изображения здесь

File -> Save AsвыбиратьSVG (svg)

введите описание изображения здесь

После выбора SVG появится окно выбора, поэтому выберите SVG Code...:

введите описание изображения здесь

Код будет либо выводиться в редакторе кода по умолчанию, либо открывать файл .txt:

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

Если вы заметили из приведенного выше кода, у меня есть три слоя, и они Layer_1, Layer_2и Layer_3. В этом случае он не выводил направляющие, но иногда я видел это, как id="guide"будто припоминаю.

Я бы сократил код до этого:

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

и вышеупомянутый SVG может вызываться как изображение в ваших файлах.

Это один из способов сделать это, но я научился и тестировал другой. В своих XHTML-файлах я обрезаю его до самого SVG следующим образом:

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

НО имейте в виду, что после некоторого тестирования я обнаружил, что <svg>тег должен быть заключен внутри файла <div>. Делая это таким образом, я экономлю код, и я могу легко анимировать его таким образом.

Результат в Хроме:

введите описание изображения здесь

Я сделал карту в AI, но размер файла ОГРОМНЫЙ как svg?
СпросиСетьПолитика конфиденциальности1y, 0v