Multimedia Universitat Oberta de Catalunya

Optimizar SVG en Illustrator

Los archivos del tipo SVG  pueden ser incrustados en una pagina web, en el código HTML, por tanto es importante que optimicemos el archivo y que seamos organizados con el archivo desde Illustrator para que al exportar no haya código innecesario.

  • Agrupa elementos en Illustrator sólo si esto implica algún uso práctico en el HTML, el código SVG añade una etiqueta <g> para los elementos agrupados.
  • Nombra las capas y los elementos en el archivo de Illustrator para poder identificar cada elemento después desde el HTML.
  • Evita utilizar efectos que necesiten de un proceso de rasterización, ya que se perdería el sentido de utilizar este Después puedes añadir efectos SVG para los gráficos directamente en el HTML (o al mismo Illustrator en Effect> SVG Filters) evitando así que los elementos se rastericen.
  • Utiliza símbolos para los elementos repetitivos en la infografía
  • Evita utilizar pinceles artísticos o vectores muy complejos.
  • Optimiza tu ilustración reduciendo el número de vectores. Un trazado complejo con muchos puntos se traduce en un archivo svg más Para reducir de una manera sencilla los vectores podemos utilizar la herramienta warp, de forma manual en las áreas que queramos y de una manera más controlado o simplificarlos mediante Objeto> trazado> simplificar de un modo más general, o bien una combinación de ambos.

Os dejo además estos enlaces que le pueden ayudar a entender algunos conceptos básicos sobre el uso y optimización de svg en la web:

https://escss.blogspot.com/2014/04/SVG-guia-inicio-uso-creacion.html

http://helpx.adobe.com/es/illustrator/using/svg.html

http://help.adobe.com/es_ES/creativesuite/cs/using/WSC7A1F924-DD38-49b4-B84B-EFF50416C860.html#WS62280CA5-B888-4191-B103-749BDE9DD861