Esto es menos un fragmento y más un recordatorio de algo que busco a menudo. Al crear archivos SVG en Adobe Illustrator, existen un par de métodos diferentes para exportar los archivos. Ambos métodos incluyen un puñado de opciones, algunas de las cuales olvido por completo lo que significan y qué seleccionar.
Método 1: Guardar como…
Probablemente no usaría este método para guardar SVG para usarlo en la web. Esto es en gran parte para guardar un documento maestro. De hecho, es posible que desee guardar directamente en el formato de Illustrator. Usaría algunas de las otras opciones de exportación para exportar para la web.
La forma más común de guardar un archivo como SVG en Adobe Illustrator es elegir el File > Save As... opción del menú principal.
Illustrator abrirá una ventana de diálogo que le preguntará cómo nombrar el archivo y dónde guardarlo. Más importante aún, también pregunta qué tipo de archivo guardar, en este caso, SVG. No SVG Comprimido (svgz). Viejo llano SVG.
Haga clic en el botón Guardar y aparecerá otro conjunto de opciones. Aquí es donde mi memoria tiende a fallarme y tengo que buscar respuestas en la web. Aquí hay una captura de pantalla de una forma perfectamente óptima de guardar un archivo SVG en Adobe Illustrator.
Opciones de SVG en Adobe Illustrator CC (2017) al seleccionar Archivo > Guardar como…
- Perfiles SVG: Esto establece el tipo de documento XML en la apertura
<svg>etiqueta. SVG 1.1 es la última versión, cubre la compatibilidad más amplia y es probablemente la opción más adecuada. Todo lo demás es una versión anterior o un subconjunto de SVG 1.1 y todavía tengo que encontrarme con un problema al seleccionarlo. - Fuentes > Tipo: Al seleccionar “Convertir en contorno” se asegurará de que cualquier texto escrito en el archivo que se exporte sean rutas vectoriales en lugar de glifos. Los glifos tienen la posibilidad de no renderizarse, pero las rutas vectoriales siempre son un gran aprobado.
- Opciones > Ubicación de la imagen: Si se utilizan imágenes rasterizadas (léase: JPG, PNG, GIF) en el archivo, entonces querremos seleccionar la opción “Enlace”. De lo contrario, la imagen ráster se incrustará en el archivo y eso eliminará los beneficios de rendimiento del SVG al aumentar el tamaño del archivo para incluir esos recursos adicionales. Es mejor hacer referencia a ellos como enlaces y asegurarse de incluir esos archivos de origen en el mismo directorio que el archivo SVG.
- Opciones > Ubicación de la imagen > Conservar las capacidades de edición de Illustrator: Este tiene un impacto masivo en la salida del archivo SVG. Dado que probablemente esté guardando una copia “maestra” aquí, no destinada a nosotros en la web, debería dejar esto marcado. Esto preservará las cosas de propiedad de Illustrator (como las guías) para la próxima vez que abra el archivo. Si no se controla, cosas como esa se quitarán y se perderán.
- Opciones avanzadas > Propiedades CSS: Seleccioné “Atributos de presentación” para este porque coloca las propiedades (por ejemplo, rellenos, trazos y demás) en el nivel más bajo de especificidad. Por ejemplo
<path stroke="black" stroke-width="2" ... />. Esto le da estilo al elemento, pero es muy fácil de anular en CSS. - Opciones avanzadas > Lugares decimales: Si ha buscado el código en busca de un
<path>, entonces sabe que los valores que especifican esas formas pueden ser muy precisos. Muchas veces, sin embargo, son demasiado precisos y aumentan el tamaño total del archivo SVG. Dado que es probable que esté guardando un archivo maestro aquí, puede mantenerlo bastante alto, ya que el tamaño del archivo no es una gran preocupación. - Opciones avanzadas > Codificación: No soy un aficionado a la codificación UTF, pero dejar esto en “Unicode UTF-8” garantiza la compatibilidad con versiones anteriores. Además, los tamaños de los archivos UTF-8 tienden a ser más pequeños que los UTF-16, por lo que es una ventaja en sí misma.
- Opciones avanzadas > Responsivo: Si deja esto sin marcar, se fijará fijo
heightywidthatributos en el SVG. Marque esta opción porque me permite establecer esos atributos en el código o en el CSS.
Método 2: Exportar como
Otra forma de obtener SVG de Adobe Illustrator es elegir el File > Export > Export As... opción del menú principal. Sin embargo, hay una segunda forma de llegar allí utilizando el panel Acciones en el espacio de trabajo de Illustrator.
Esta opción es ideal si sabe que va a usar este archivo directamente en la web y no planea modificar el diseño más adelante. Proporciona muchas menos configuraciones y un par de opciones que permiten que el archivo optimice aún más el archivo para un mejor rendimiento. De hecho, es una buena práctica hacer esto en una copia del archivo en lugar de en el archivo maestro en sí mismo, por lo que hay una versión que se puede abrir y editar más tarde en Illustrator y otra que es más adecuada para publicar en un sitio web de producción.
Opciones de SVG en Adobe Illustrator CC (2017) al seleccionar Archivo > Exportar > Exportar como…
- Estilismo: Cubrimos esto anteriormente en la configuración del Método 1, pero elijo “Atributos de presentación” aquí porque es una forma de organizar las propiedades en los atributos de nivel más alto. Esto agrega orden al marcado, flexibilidad en nuestra capacidad para diseñar los atributos posteriores con CSS y, a menudo, conduce a tamaños de archivo más pequeños.
- Fuente: Este es otro que cubrimos anteriormente, pero al elegir “Convertir en contornos” se intercambian los glifos por rutas vectoriales para caracteres, lo que garantiza que el texto se represente correctamente.
- Imágenes: Este es otro de los que cubrimos anteriormente, pero elegir “Enlazar” evitará que las imágenes ráster incrustadas se empaqueten en el SVG, lo que hace que el archivo sea mucho más grande.
- ID de objeto: esta configuración le da a Illustrator órdenes de marcha sobre cómo nombrar ID en el marcado. Puede indicarle que asigne nombres a los ID en función de cómo se nombran las capas en el archivo.
- Decimal: Menos decimales en el código significan tamaños de archivo más pequeños. Configurando esto en
1es ideal y está bien en muchos casos y no tendrá una diferencia notable en el diseño, pero2es típicamente seguro. De cualquier manera, vale la pena comprobar cómo se representa el SVG. - minificar: ¡Sí, por favor! Esto reduce el código para reducir los espacios en blanco y aumentar el rendimiento web de forma muy similar a la minimización de CSS.
- Sensible: Exactamente como el primer método, seleccionar esta opción es ideal porque fijo
heightywidthde lo contrario, los atributos se colocarían en el SVG.