¿Por qué guardar su logo como SVG?
SVG es el formato ideal para logos en sitios web, aplicaciones y aplicaciones digitales. Es ligero, escalable y compatible con todos los navegadores modernos. En esta guía le mostramos exactamente cómo exportar un archivo SVG óptimo desde Adobe Illustrator.
Exportar SVG en 5 pasos
Paso 1: Prepare su diseño
Convierta todo el texto a contornos a través de Texto > Crear contornos. Elimine capas ocultas y elementos no utilizados. Asegúrese de que todos los objetos estén en una sola capa o estén organizados lógicamente. Verifique que no haya efectos ráster (sombras, desenfoque) en su diseño, ya que se incrustarán como bitmap en el SVG.
Paso 2: Ajuste la mesa de trabajo
Seleccione todos sus objetos (Ctrl/Cmd+A) y vaya a Objeto > Mesas de trabajo > Ajustar a límites de ilustración. Esto asegura que la mesa de trabajo se ajuste perfectamente alrededor de su logo sin espacios en blanco innecesarios. También puede utilizar manualmente la herramienta Mesa de trabajo (Shift+O).
Paso 3: Elija el método de exportación correcto
Vaya a Archivo > Exportar > Exportar como. Elija SVG como tipo de archivo. También puede usar Archivo > Guardar como > SVG, pero 'Exportar como' le da más control sobre la configuración y generalmente produce un archivo más limpio.
Paso 4: Configure las opciones SVG
En la pantalla de opciones SVG: elija perfil SVG 'SVG 1.1', configure la fuente en 'Convertir a contornos', elija 'Atributos de presentación' en propiedades CSS. Establezca Decimales en 2 para un buen equilibrio entre tamaño de archivo y precisión. Active 'Responsivo' si su logo debe escalar de forma flexible.
Paso 5: Verifique el resultado
Abra el archivo SVG exportado en un navegador web para verificar que todo se vea correctamente. Compárelo con su original en Illustrator. Preste atención a que los colores coincidan, las formas estén intactas y el archivo se escale correctamente al hacer zoom en el navegador.
Configuración óptima de exportación SVG
Para los mejores resultados utilice estas configuraciones: perfil SVG 1.1, propiedades CSS en 'Atributos de presentación', Decimales en 2, Codificación UTF-8. Desactive 'Conservar capacidades de edición de Illustrator' para mantener el archivo más pequeño. Si su logo no contiene imágenes, elija 'Vincular' en ubicación de imagen. Para optimización adicional, puede pasar el archivo por SVGO o una herramienta similar.
Consejos adicionales para una exportación SVG óptima
Utilice el menor número posible de puntos de anclaje para archivos más pequeños. Evite las máscaras de recorte cuando sea posible y cree formas con Buscatrazos en su lugar. No utilice efectos de transparencia de Illustrator, sino establezca la opacidad directamente en el objeto. Agrupe los elementos lógicos para mantener el código SVG organizado. Considere usar 'Mostrar código SVG' para inspeccionar el código antes de exportar.
Preguntas frecuentes
¿Por qué mi SVG se ve diferente que en Illustrator?
Esto suele deberse a efectos ráster (sombras, desenfoque, degradados con transparencia) que no se traducen bien a SVG. Convierta todos los efectos a formas vectoriales simples o elimínelos. Verifique también que el texto se haya convertido a contornos.
¿Qué perfil SVG debo elegir?
Elija SVG 1.1 para la mayor compatibilidad con navegadores. SVG Tiny está destinado a dispositivos móviles con capacidad limitada y no es necesario para la mayoría de las aplicaciones.
¿Cómo hago mi SVG más pequeño?
Reduzca el número de puntos de anclaje, use números enteros para los colores, elimine metadatos innecesarios y utilice un optimizador SVG como SVGO. En Illustrator puede usar 'Simplificar trazado' para reducir el número de puntos.
Archivo SVG perfecto desde Illustrator
Con la configuración y preparación correctas, puede exportar desde Illustrator un archivo SVG perfecto para su sitio web. ¿No tiene Illustrator o desea asegurarse de un resultado óptimo? Logo in Vector le entrega su logo como archivo SVG optimizado, listo para usar directamente en su sitio web.