Opciones de exportación de Adobe Illustrator - Trucos CSS

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 totalmente qué significan y qué seleccionar.

Método 1: Guardar como…

Probablemente no usaría este método para guardar SVG para su uso en la web. Esto es principalmente 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 la File > Save As… opción en el menú principal.

Illustrator abrirá una ventana de diálogo que le preguntará qué nombre debe tener el archivo y dónde guardarlo. Más importante aún, también pregunta qué tipo de archivo guardar como cuál, en este caso es SVG. No SVG comprimido (svgz). SVG llano.

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.

• Perfiles SVG : esto establece el tipo de documento XML en la etiqueta de apertura . SVG 1.1 es la última versión, cubre el soporte más amplio y probablemente sea 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 no he encontrado un problema al seleccionarlo.
• Fuentes> Tipo : si selecciona "Convertir en contorno", se asegurará de que cualquier texto escrito en el archivo se exporta como rutas vectoriales en lugar de glifos. Los glifos tienen la posibilidad de no ser renderizados, pero las rutas vectoriales siempre son un gran aprobado.
• Opciones> Ubicación de la imagen : si se utilizan imágenes rasterizadas (léase: JPG.webp, 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 absorbe los beneficios de rendimiento directamente 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 fuente en el mismo directorio que el archivo SVG.
• Opciones> Ubicación de la imagen> Conservar las capacidades de edición de Illustrator : esta tiene un impacto masivo en la salida del archivo SVG. Dado que probablemente esté guardando una copia "maestra" aquí, que no está destinada a nosotros en la web, dejaría esta casilla marcada. Esto conservará los elementos de propiedad de Illustrator (como las guías) para la próxima vez que abra el archivo. Si no se marca, significará que cosas así se eliminarán y perderán.
• Opciones avanzadas> Propiedades de CSS : selecciono "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 . Esto le da estilo al elemento, pero es muy fácil de anular en CSS.
• Opciones avanzadas> Lugares decimales : si ha examinado el código para a , 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 general del archivo SVG. Dado que es probable que esté guardando un archivo maestro aquí, puede mantenerlo bastante alto, porque 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 archivos UTF-8 tienden a ser más pequeños que UTF-16, por lo que es una ventaja en sí misma.
• Opciones avanzadas> Responsive : Si deja esta opción sin marcar, se establecerán atributos fijos heighty widthen el SVG. Marco 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 la File > Export > Export As… opción en el menú principal. Sin embargo, hay una segunda forma de llegar 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 del archivo maestro en sí, 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.

• Estilo : 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 subsiguientes con CSS y, a menudo, conduce a tamaños de archivo más pequeños.
• Fuente : esta es otra que cubrimos anteriormente, pero al elegir "Convertir en contornos" intercambia glifos por rutas vectoriales para caracteres, lo que garantiza que el texto se procese correctamente.
• Imágenes : esta es otra que cubrimos anteriormente, pero la elección de "Enlace" evitará que las imágenes rasterizadas 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 las ID en el marcado. Puede indicarle que asigne un nombre a los ID según el nombre de las capas en el archivo.
• Decimal : Menos decimales en el código significan tamaños de archivo más pequeños. Establecer esto en 1es ideal y está bien en muchos casos y no tendrá una diferencia notable en el diseño, pero 2generalmente es seguro. De cualquier manera, vale la pena comprobar cómo se representa el SVG.
• Minify : ¡Sí, por favor! Esto procesa el código para reducir los espacios en blanco y aumentar el rendimiento web de forma muy similar a la minimización de CSS.
• Responsive : Exactamente como el primer método, seleccionar esta opción es ideal porque los atributos fijos heighty de widthotro modo se colocarían en el SVG.