Hice un mapa en AI, pero el tamaño del archivo es ENORME como un svg.

Hice un svg en Illustrator, pero ahora quiero usarlo en un sitio web/aplicación pero tiene un tamaño enorme (alrededor de 10 MB), ¿cómo puedo reducir su tamaño? Mi archivo de Illustrator es bastante grande, pero eso se debe a que tengo algunos elementos de calco debajo. El archivo también tiene una mesa de trabajo grande, pero cuando guardo, ¿debo eliminar mis elementos de rastreo y disminuir el tamaño de la mesa de trabajo?

¿Has probado a comprimir el svg? Pero sí, svg es súper detallado, así que espere que crezca como un reguero de pólvora.
¿Puedes dar más información sobre el gráfico? Puede tener más sentido exportarlo como PNG si tiene detalles tan finos. SVG es mejor para dibujos vectoriales simples con colores sólidos o degradados suaves.

Respuestas (2)

Sí, debe eliminar cualquier elemento adicional antes de guardar su svg. Además, ¿qué tan complejo es tu mapa? Los svg generalmente funcionan mejor sin degradados, máscaras de recorte o efectos adicionales como sombras paralelas. Si necesita mantener los detalles, ¿por qué no simplemente guardar para la web desde Illustrator como png?

Así que mi tamaño ahora es de 448 KB. Gran reducción de 10 MB. No tengo máscaras de recorte (creo) ni efectos locos. Súper básico. ¿Hay alguna forma de guardarlo en Illustrator para que sea lo más básico posible?
Diría que con un archivo de 448kb puede ser lo más bajo posible. Si desea reducir el archivo a la configuración más básica, puede intentar guardarlo en Illustrator 3 (no en "cs" 3) O en una versión anterior de un tipo de archivo .eps. Asegúrese de presionar guardar como y, al elegir la versión, seleccione la más antigua posible. Es posible que reciba una advertencia que indique que algunos efectos avanzados o degradados pueden aplanarse y esto está bien. Dale una oportunidad. De lo contrario, creo que deberías estar listo.

Me encontré con esto varias veces con Illustrator CC-2014 y usaré el siguiente como ejemplo:

Solo algunas formas, colores y guías.

ingrese la descripción de la imagen aquí

File -> Save AsseleccionarSVG (svg)

ingrese la descripción de la imagen aquí

Después de seleccionar SVG, aparecerá un cuadro de opción, así que seleccione SVG Code...:

ingrese la descripción de la imagen aquí

El código aparecerá en su editor de código predeterminado o abrirá un archivo .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>

Si observa en el código anterior, tengo tres capas y son Layer_1, Layer_2y Layer_3. En este caso no salió las guías pero a veces lo he visto como id="guide"si lo recordara.

Recortaría el código a esto:

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

y el SVG anterior se puede llamar como una imagen en sus archivos.

Esa es una forma de hacerlo, pero he aprendido y he estado probando otra. En mis archivos XHTML, lo recorto hasta el SVG mismo así:

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

PERO tenga en cuenta que, después de algunas pruebas, descubrí que la <svg>etiqueta debe incluirse dentro de un archivo <div>. Hacerlo de esta manera ahorra código y puedo animarlo fácilmente de esta manera.

Resultado en Chrome:

ingrese la descripción de la imagen aquí

Hice un mapa en AI, pero el tamaño del archivo es ENORME como un svg.
RespuestasAquíPolítica de privacidad1y, 0v