Digamos que creó una hermosa ilustración vectorial en Adobe Illustrator. O ha utilizado Illustrator para perfeccionar algunos gráficos existentes. O, literalmente, por cualquier motivo, tiene un archivo abierto en Adobe Illustrator que finalmente desea usar en la web como SVG.
Hay varias formas diferentes de sacar SVG de Illustrator, cada una un poco diferente. Vamos a ver.
TL; DR: Exportando, como Archivo> Exportar> Exportar como… La optimización de SVG es la mejor opción para la web.
El método “Guardar como …”
Illustrator admite SVG como formato de archivo de primera clase. Usted puede Archivo> Guardar como… y elija “SVG” como opción, como alternativa al formato de archivo predeterminado `.ai`.
Uso de Editar> Guardar como… en Illustrator
Incluso hay un botón en las opciones Guardar SVG que aparece llamado “Código SVG …” en el que puede hacer clic para que Illustrator le muestre el código antes de guardarlo, presumiblemente para copiar y pegar.
Si busca un poco en la web sobre las diferencias entre guardar en diferentes formatos de Illustrator, encontrará mucha información genérica que le dice que SVG es para usar en LA WEB MUNDIAL, así que si es ahí donde piensa usar este gráfico, ese es el formato en el que debe guardar.
Tenga cuidado aquí. Guardar como SVG de Illustrator está bien, pero el archivo no está en absoluto listo para su uso directo en la web. Cuando “Guardar como …” de Illustrator como SVG, la principal preocupación de Illustrator es que puede abrir ese archivo de nuevo en Illustrator tal como lo dejó.
Por ejemplo, Illustrator tiene características patentadas que no forman parte de SVG. Un ejemplo sencillo: guías. No perderá sus guías guardando como SVG de esta manera, se conservan perfectamente. Pero las guías no tienen sentido en SVG en la web, por lo que estaría enviando datos inútiles si usa SVG guardado de esta manera directamente en la web.
El tamaño de archivo de los archivos SVG de Illustrator guardados en “Guardar como …” puede ser varios órdenes de magnitud mayor que el de una versión realmente lista para la web. Eche un vistazo al logotipo de Programar Plus”Guardar como …” y uno exportado para la web.
410 KB para la versión “Guardar como …” frente a 3 KB para la versión exportada.
No nos queda del todo claro por qué “Guardar como …” como SVG sería una buena idea. Es posible que desee mantener los archivos como `.ai` hasta que realmente desee exportarlos a la web. O si lo guarda como SVG, también puede usar la casilla de verificación “Conservar las capacidades de edición de Illustrator” y usar una convención de nomenclatura que sea clara en que se trata de un archivo “original”, no listo para la web.
Espera, ¿”versión exportada”? Veamos eso a continuación.
El método “Exportar como”
Archivo> Exportar> Exportar como… es muy diferente. Está “exportando”, y la implicación es que el archivo que se genera ya no es un archivo editable y compatible con Illustrator, sino un archivo nuevo específicamente para algún otro propósito.
JPG es una de las opciones, por ejemplo. No esperaría poder editar su arte vectorial después de exportarlo como JPG.
SVG también es una opción aquí. El resultado es muy diferente a “Guardar como …”. Los SVG exportados en realidad están bastante cerca de estar listos para la web. No hay ningún tipo de documento extraño, un montón de metadatos o material patentado de Illustrator. Es probable que el SVG exportado no se abra en Illustrator exactamente de la misma manera que en el archivo original.
Obtendrá una pantalla de opciones de exportación mínima, como esta:
Las opciones de SVG al exportar SVG.
Las opciones que se muestran allí son buenos valores predeterminados. Vista rápida:
- Estilo: “Atributos de presentación” significa cosas como relleno: rojo; en lugar de “Estilos en línea”, que significa estilo = “relleno: rojo;”. Los atributos de presentación son más fáciles de anular en CSS. Los estilos en línea brindan más resistencia al estilo. También hay una opción para exportar estilos en un
<style>block dentro del SVG, que puede ser eficiente en SVG con muchos elementos similares. - Fuente: “SVG” significa usar elementos (y amigos), lo cual es extremadamente eficiente, siempre que las fuentes que haya usado estén disponibles en el sitio web en el que pretendía usarlas. “Convertir a contornos” convertirá el texto en formas vectoriales al exportar, asegurándose de que se verá exactamente bien, pero perderá eficiencia, accesibilidad, capacidad de búsqueda y capacidad de copia.
- Imágenes: “Vincular” significa que si hay gráficos rasterizados dentro del SVG, se vinculará a ellos en lugar de incrustarlos dentro del SVG, en lugar de “Incrustar” dinglos.
- ID de objeto: Único asegura que cada ID sea único (bueno para la web), pero también tiene la opción de hacerlos muy cortos (“Mínimo”) o basarse en nombres de capa.
- Decimal: 2 probablemente esté bien. Solo subiría si supiera que estaba trabajando con un viewBox realmente pequeño y necesitaría mucha precisión, o bajaría si estuviera trabajando en un viewBox gigante.
- Minificar: Estamos exportando para la web, así que sí.
- Sensible: On significa “no pongas
widthyheightatributo”. Fuera significa hacer. De hecho, sería inteligente dejar esto fuera (mira aquí).
Exportar de esta manera es definitivamente bueno para la web. Aunque SVGO todavía puede obtener un poco más de eficiencia, dependiendo del gráfico, por supuesto.
El método “Exportar para pantallas”
Desde la versión CC 2017, Illustrator tiene una Archivo> Exportar> Exportar para pantallas… método creado específicamente para exportar para dispositivos digitales. Yo diría “la web”, pero tiene funciones para exportar para iOS y Android, por lo que “Pantallas”, como dicen, es apropiado.
Esto abre un diálogo de opciones que nos permite seleccionar nuestra obra de arte de diferentes maneras y exportar las partes que queremos en los formatos que queremos.
La pantalla de opciones “Exportar para pantallas”
¡Esta es una interfaz de usuario realmente conveniente! Podemos exportar solo partes de nuestra ilustración no solo en SVG, sino también en otros formatos, al mismo tiempo exacto. Imagínese un sistema de iconos. 20 mesas de trabajo en un solo documento, y con un comando puede exportarlas todas como SVG y múltiples resoluciones de PNG. Bastante agradable.
Debajo del capó, parece estar usando el mismo sistema que “Exportar”, por lo que obtendrá resultados optimizados para la web.
Artboards es una forma de dividir las ilustraciones para exportarlas por separado. También hay un panel de exportación de activos que le permite arrastrar y soltar fragmentos de material gráfico que se generarán por separado.
El método “Copiar directamente desde la mesa de trabajo”
Hablando de seleccionar fragmentos individuales de la obra de arte destinados a ser utilizados como SVG, existe una forma un poco menos conocida de extraer bits, y eso es tan simple como Editar> Copiar.
Después de copiar, su portapapeles tendrá un código SVG en línea que puede pegar como texto.
El código que obtiene es ligeramente diferente a cualquier método que hayamos visto hasta ahora. Sin embargo, es más parecido al formato “Guardar como …”, ya que obtiene el tipo de documento XML y demás. No es el formato optimizado para web que obtenemos al exportar. Tiene su propio viewBox recortado exactamente a los bordes de los elementos.
Si usa esto para colocar SVG directamente en su HTML, planee hacer una pequeña limpieza manual del código.
Ahora que tienes el SVG …
… ¿ahora que?
- Quizás esté recopilando archivos de iconos SVG individuales para usarlos en un sistema de iconos SVG. Como en, usar una herramienta de compilación para procesarlos en un solo archivo lleno de
<symbol>s para<use>. - Quizás necesitabas el `.svg` para usarlo como
<img>. - Quizás necesitabas el `.svg` para usarlo como
background-imageen CSS. - Quizás vaya a colocar el código SVG en HTML directamente como SVG en línea.
Hay muchas formas de usar SVG, pero eso siempre comienza con hacer que el SVG funcione en primer lugar.