Guía del usuario Cancelar

SVG

  1. Guía del usuario de Illustrator
  2. Descubra Illustrator
    1. Introducción a Illustrator
      1. Novedades de Illustrator
      2. Preguntas habituales
      3. Requisitos del sistema de Illustrator
      4. Illustrator para Apple Silicon
    2. Espacio de trabajo
      1. Conceptos básicos del espacio de trabajo
      2. Creación de documentos
      3. Herramientas
      4. Personalizar métodos abreviados de teclado
      5. Mesas de trabajo
      6. Personalizar el espacio de trabajo
      7. Panel Propiedades
      8. Configuración de preferencias
      9. Espacio de trabajo táctil
      10. Compatibilidad con Microsoft Surface Dial en Illustrator
      11. Recuperar, deshacer y automatizar acciones
      12. Rotar vista
      13. Reglas, cuadrículas y guías
      14. Accesibilidad en Illustrator
      15. Modo seguro
      16. Modo de visualización de la ilustración
      17. Uso de Touch Bar con Illustrator
      18. Archivos y plantillas
      19. Sincronizar la configuración a través de Adobe Creative Cloud
    3. Herramientas en Illustrator
      1. Selección
        1. Información general
        2. Selección
        3. Selección directa
        4. Lazo
        5. Mesa de trabajo
      2. Navegación
        1. Información general
        2. Zoom
        3. Rotar vista
      3. Pintar
        1. Información general
        2. Degradado
        3. Creador de formas
      4. Texto
        1. Información general
        2. Texto
        3. Texto en trazado
  3. Illustrator para iPad
    1. Presentación de Illustrator para iPad
      1. Información general sobre Illustrator para iPad
      2. Preguntas frecuentes de Illustrator para iPad
      3. Requisitos del sistema | Illustrator para iPad
      4. Lo que puede o no puede hacer con Illustrator para iPad
    2. Espacio de trabajo
      1. Espacio de trabajo de Illustrator para iPad
      2. Métodos abreviados y gestos táctiles
      3. Métodos abreviados de teclado de Illustrator para iPad
      4. Ajustar la configuración de la aplicación
    3. Documentos
      1. Usar documentos en Illustrator para iPad
      2. Importar documentos de Photoshop y Fresco
    4. Seleccionar y organizar objetos
      1. Crear objetos repetidos
      2. Fusionar objetos
    5. Dibujo
      1. Dibujar y editar trazados
      2. Dibujar y editar formas
    6. Texto
      1. Trabajar con texto y fuentes
      2. Crear diseños de texto a lo largo de un trazado
      3. Añadir fuentes propias
    7. Uso de imágenes
      1. Vectorizar imágenes de trama
    8. Color
      1. Aplicar colores y degradados
  4. Documentos en la nube
    1. Conceptos básicos
      1. Trabajar con documentos en la nube de Illustrator
      2. Compartir documentos en la nube de Illustrator y colaborar en ellos
      3. Ampliar el almacenamiento en la nube de Adobe Illustrator
      4. Documentos en la nube de Illustrator | Preguntas habituales
    2. Solución de problemas
      1. Solución de problemas de creación o guardado de documentos en la nube de Illustrator
      2. Solucionar errores de documentos en la nube de Illustrator
  5. Añadir y editar contenido
    1. Dibujo
      1. Conceptos básicos de dibujo
      2. Editar trazados
      3. Dibujar ilustraciones con píxeles perfectos
      4. Dibujar con la herramienta Pluma, Curvatura o Lápiz
      5. Dibujar líneas y formas sencillas
      6. Calco de imagen
      7. Simplificar un trazado
      8. Definir cuadrículas de perspectiva
      9. Herramientas y conjuntos de símbolos
      10. Ajustar segmentos de trazado
      11. Diseñar una flor en cinco sencillos pasos
      12. Dibujo en perspectiva
      13. Símbolos
      14. Dibujar trazados con pixelado perfecto en flujos de trabajo web
    2. Efectos 3D y materiales de Adobe Substance
      1. Acerca de los efectos 3D en Illustrator
      2. Crear gráficos 3D
      3. Crear objetos 3D
      4. Crear texto 3D
    3. Color
      1. Acerca del color
      2. Seleccionar colores
      3. Uso y creación de muestras
      4. Ajustar colores
      5. Uso del panel Temas de Adobe Color
      6. Grupos de colores (armonías)
      7. Panel Temas de color
      8. Volver a colorear la ilustración
    4. Pintura
      1. Acerca de la pintura
      2. Pintar con rellenos y trazos
      3. Grupos de pintura interactiva
      4. Degradados
      5. Pinceles
      6. Transparencia y modos de fusión
      7. Aplicar un trazo a un objeto
      8. Creación y edición de motivos
      9. Mallas
      10. Motivos
    5. Seleccionar y organizar objetos
      1. Seleccionar objetos
      2. Capas
      3. Agrupar y expandir objetos
      4. Mover, alinear y distribuir objetos
      5. Apilar objetos    
      6. Bloquear, ocultar y eliminar objetos
      7. Duplicar objetos
      8. Rotar y reflejar objetos
    6. Cambiar la forma de objetos
      1. Recortar imágenes
      2. Transformar objetos
      3. Combinar objetos
      4. Cortar, dividir y recortar objetos
      5. Deformación de posición libre
      6. Escalar y distorsionar objetos
      7. Fusionar objetos
      8. Cambiar formas con envolventes
      9. Cambiar forma de objetos con efectos
      10. Crear nuevas formas con las herramientas Shaper y Creador de formas
      11. Uso de vértices interactivos
      12. Flujos de trabajo para cambiar de forma mejorados con compatibilidad táctil
      13. Editar máscaras de recorte
      14. Formas interactivas
      15. Crear formas mediante la herramienta Creador de formas
      16. Edición global
    7. Texto
      1. Crear texto
      2. Fuentes y tipografía
      3. Aplicación de formato al texto
      4. Importar y exportar texto
      5. Aplicación de formato a párrafos
      6. Caracteres especiales
      7. Crear texto en un trazado
      8. Estilos de carácter y de párrafo
      9. Tabulaciones
      10. Texto y tipografía
      11. Encontrar fuentes que faltan (flujo de trabajo de Typekit)
      12. Modificar texto en Illustrator 10
      13. Texto en árabe y hebreo
      14. Fuentes | Preguntas frecuentes y soluciones de problemas
      15. Crear efecto de texto 3D
      16. Diseños de tipografía creativos
      17. Ampliar y rotar texto
      18. Espaciado entre líneas y caracteres
      19. Separación de sílabas y saltos de línea
      20. Mejoras de texto
      21. Ortografía y diccionarios de idiomas
      22. Aplicación de formato de caracteres asiáticos
      23. Modos de composición de alfabetos asiáticos
      24. Crear diseños de texto con objetos de fusión
      25. Crear un póster con texto con Calco de imagen
    8. Crear efectos especiales
      1. Trabajar con efectos
      2. Estilos gráficos
      3. Crear una sombra paralela
      4. Atributos de apariencia
      5. Crear bosquejos y mosaicos
      6. Sombras paralelas, resplandor y desvanecimiento
      7. Resumen de efectos
    9. Gráficos web
      1. Métodos óptimos para crear gráficos web
      2. Gráficos
      3. SVG
      4. Crear animaciones
      5. Sectores y mapas de imágenes
  6. Importación, exportación y almacenamiento
    1. Importación
      1. Importar archivos de ilustración
      2. Importar imágenes de mapa de bits
      3. Importar ilustraciones de Photoshop
      4. Colocar varios archivos | Illustrator CC
      5. Desincrustar imágenes
      6. Importar archivos Adobe PDF
      7. Importar archivos EPS, DCS y de AutoCAD
      8. Información sobre enlaces
    2. Bibliotecas Creative Cloud en Illustrator 
      1. Bibliotecas Creative Cloud en Illustrator
    3. Guardar
      1. Guardar ilustraciones
    4. Exportar
      1. Usar ilustraciones de Illustrator en Photoshop
      2. Exportar ilustraciones
      3. Recopilar recursos y exportar en lotes
      4. Empaquetado de archivos
      5. Creación de archivos de Adobe PDF
      6. Extraer CSS | Illustrator CC
      7. Opciones de Adobe PDF
      8. Información de archivo y metadatos
  7. Impresión
    1. Prepárese para imprimir
      1. Configurar documentos para impresión
      2. Cambiar el tamaño y la orientación de la página
      3. Especificar marcas de recorte para separación o alineación
      4. Primeros pasos con un lienzo grande
    2. Impresión
      1. Sobreimprimir
      2. Imprimir mediante gestión del color
      3. Impresión PostScript
      4. Ajustes preestablecidos de impresión
      5. Marcas de impresora y sangrados
      6. Imprimir y guardar ilustraciones transparentes
      7. Reventado
      8. Impresión de separaciones de color
      9. Imprimir degradados, mallas y fusiones de color
      10. Sobreimpresión en blanco
  8. Automatizar tareas
    1. Combinar datos mediante el panel Variables
    2. Automatización con scripts
    3. Automatización con acciones
  9. Solución de problemas 
    1. Errores de bloqueo
    2. Recuperar archivos después de un cierre inesperado
    3. Problemas de archivos
    4. Problemas con controladores de dispositivos GPU
    5. Problemas con dispositivos Wacom
    6. Problemas con archivos DLL
    7. Problemas de memoria
    8. Problemas con archivos de preferencias
    9. Problemas de fuentes
    10. Problemas con la impresora
    11. Enviar informe de error a Adobe

Descubra cómo trabajar con SVG para utilizar XML y JavaScript a la hora de crear gráficos web que respondan a las acciones del usuario con efectos sofisticados, como resaltados, información de herramientas, audios y animaciones.

Acerca de SVG

Los formatos de imagen de mapa de bits (GIF, JPEG, WBMP y PNG) describen las imágenes utilizando una cuadrícula de píxeles. Los archivos resultantes tienden a ser voluminosos, limitados a una sola resolución, normalmente baja, y consumen mucho ancho de banda en Internet. Por otra parte, SVG es un formato de gráficos vectoriales que describe imágenes como formas, trazados, texto y efectos de filtro. Los archivos resultantes son compactos y ofrecen gráficos de alta calidad en Internet, en impresoras e incluso en dispositivos portátiles y con recursos limitados. Los usuarios pueden aumentar la vista de una imagen SVG en la pantalla sin tener que sacrificar el enfoque, el detalle o la claridad. Además, el formato SVG ofrece mejor compatibilidad con texto y colores, lo que garantiza que los usuarios vean las imágenes tal y como aparecen en la mesa de trabajo de Illustrator.

El formato SVG está totalmente basado en XML y ofrece muchas ventajas tanto para desarrolladores como para usuarios. Con SVG, se puede utilizar XML y JavaScript para crear gráficos web que respondan a las acciones del usuario con efectos sofisticados, como el resaltado, la información de herramientas, el audio y las animaciones.

Puede guardar ilustraciones en¬ formato SVG¬ con el comando Guardar, Guardar como, Guardar una copia o Guardar para Web y dispositivos. Para acceder al conjunto completo de opciones de exportación de SVG, utilice el comando Guardar, Guardar como o Guardar una copia. El comando Guardar para Web y dispositivos ofrece un subconjunto de opciones de exportación de SVG válidas para el trabajo orientado a Web.

El modo en que se configure la ilustración en Illustrator influirá en el archivo SVG resultante. Tenga en cuenta las pautas siguientes:

  • Utilice capas para añadir estructura a un archivo SVG. Al guardar la ilustración en formato SVG, cada capa se convertirá en un elemento de grupo (<g>). Por ejemplo, una capa llamada Button1 pasa a ser <g id="Button1_ver3.0"> en el archivo SVG. Las capas anidadas se convierten en grupos anidados SVG y las capas ocultas se conservan mediante la propiedad de estilo SVG display="none".

  • Si desea que los objetos de diferentes capas sean transparentes, ajuste la opacidad de cada objeto y no la de cada capa. Al modificar la opacidad en el nivel de la capa, el archivo SVG resultante no será transparente cuando aparezca en Illustrator.

  • Los datos de rasterizado no son escalables en el Visor SVG y no se pueden editar al igual que otros elementos SVG. En la medida de lo posible, evite crear ilustraciones que se rastericen en el archivo SVG. Las mallas de degradado y los objetos que utilizan los efectos Rasterizar, Artístico, Desenfocar, Trazos de pincel, Distorsionar, Pixelizar, Enfocar, Boceto, Estilizar, Textura y Vídeo se rasterizan al guardarse en formato SVG. De forma similar, los estilos gráficos que incluyen estos efectos también producen rasterizado. Utilice los efectos de filtro SVG para añadir efectos de gráfico sin rasterizar.

  • Utilice símbolos y simplifique los trazados de la ilustración para mejorar el rendimiento de SVG. Asimismo, evite la utilización de pinceles que produzcan muchos datos de trazado, como Carboncillo, Cenizas y Pluma múltiple, en caso de que el rendimiento sea de alta prioridad.

  • Utilice sectores, mapas de imágenes y secuencias de comandos para añadir enlaces web a un archivo SVG.

  • Un lenguaje de programación, como JavaScript, ofrece funciones ilimitadas a un archivo SVG. Los movimientos del puntero y el teclado pueden activar funciones de las secuencias de comandos, como los efectos de rollover. Las secuencias de comandos también pueden utilizar el DOM (Document Object Model, modelo de objeto de documentos) para acceder y modificar el archivo SVG (insertando o eliminando elementos SVG, por ejemplo).

Aplicar efectos SVG

Puede utilizar los efectos de SVG para añadir a la ilustración propiedades de gráficos, como sombras paralelas. Los efectos SVG difieren de sus equivalentes de mapa de bits en que están basados en XML y no dependen de la resolución. De hecho, un efecto SVG no es nada más que una serie de propiedades XML que describen diversas operaciones matemáticas. El efecto resultante se verá en el objeto de destino en lugar de en el gráfico de origen.

Illustrator incluye un conjunto estándar de efectos de SVG. Puede utilizar los efectos con sus propiedades por defecto, editar el código XML para producir efectos a medida o escribir efectos SVG nuevos.

Nota:

Para modificar los filtros de SVG por defecto de Illustrator, utilice un editor de texto para editar el archivo Filtros SVG Adobe. svg de la carpeta Documents and Settings/<dir_usuario>/Datos de programa/Adobe/Adobe Illustrator CS5 Settings/<ubicación>. Es posible modificar y eliminar definiciones de filtros existentes y añadir nuevas.

  1. Seleccione un objeto o grupo (o identifique como destino una capa en el panel Capas).
  2. Lleve a cabo uno de los procedimientos siguientes:
    • Para aplicar un efecto con sus ajustes predeterminados, seleccione el efecto en la sección inferior del submenú Efecto > Filtros SVG.

    • Para aplicar un efecto con ajustes personalizados, seleccione Efecto > Filtros SVG > Aplicar filtro SVG. En el cuadro de diálogo, seleccione el efecto y haga clic en el botón Editar filtro SVG   . Edite el código por defecto y haga clic en OK.

    • Para crear y aplicar un efecto nuevo, seleccione Efecto > Filtros SVG > Aplicar filtro SVG. En el cuadro de diálogo, haga clic en el botón Nuevo filtro SVG   , introduzca el nuevo código y haga clic en OK.

      Al aplicar un efecto de filtro SVG, Illustrator mostrará una versión rasterizada del efecto en la mesa de trabajo. Es posible controlar la resolución de esta imagen de previsualización cambiando el ajuste de resolución de rasterizado del documento.

      Nota: Un efecto SVG debe ser el último de un objeto que utilice varios efectos; es decir, debe aparecer en la parte inferior del panel Apariencia (justo encima de la entrada Transparencia). Si existen otros efectos aparte de SVG, el resultado del SVG consistirá en un objeto rasterizado.

Importar efectos de un archivo SVG

  1. Seleccione Efecto > Filtro SVG > Importar filtro SVG.

  2. Seleccione el archivo SVG desde el que desee importar efectos y haga clic en Abrir.

Información general del panel Interactividad SVG

Utilice el panel Interactividad SVG (Ventana > Interactividad SVG) para añadir interactividad a la ilustración al exportarla para verla en un navegador web. Por ejemplo, si crea un evento que activa un comando de JavaScript, puede rápidamente crear movimiento en una página web cuando el usuario realice una acción, como mover el cursor del ratón sobre un objeto. El panel Interactividad SVG permite también ver todos los eventos y archivos de JavaScript asociados al archivo actual.

Eliminar un evento del panel Interactividad SVG

  • Para eliminar un evento, selecciónelo y haga clic en el botón Eliminar o seleccione Eliminar evento en el menú del panel.
  • Para eliminar todos los eventos, seleccione Borrar eventos en el menú del panel.

Ver, añadir o eliminar eventos enlazados a un archivo

  1. Haga clic en el botón Enlazar archivos JavaScript  .
  2. En el cuadro de diálogo Archivos JavaScript, seleccione una entrada de JavaScript y realice una de las siguientes operaciones:
    • Haga clic en Añadir para buscar más archivos JavaScript.

    • Haga clic en Quitar para eliminar la entrada JavaScript seleccionada.

Adición de interactividad SVG a ilustraciones

  1. En el panel Interactividad SVG, seleccione un evento. (Consulte Eventos SVG).

  2. Introduzca el archivo JavaScript correspondiente y pulse Intro.

Eventos SVG

onfocusin

Activa la acción cuando el elemento está resaltado, como al seleccionarlo con el cursor.

onfocusout

Activa la acción cuando el elemento deja de estar resaltado (suele suceder cuando se resalta otro elemento).

onactivate

Activa la acción al hacer clic con el ratón o al pulsar una tecla, en función del elemento SVG.

onmousedown

Activa la acción al pulsar el botón del ratón sobre un elemento.

onmouseup

Activa la acción al soltar el botón sobre un elemento.

onclick

Activa la acción al hacer clic con el ratón sobre un elemento.

onmouseover

Activa la acción al mover el puntero sobre un elemento.

onmousemove

Activa la acción mientras el puntero está sobre un elemento.

onmouseout

Activa la acción al alejar el puntero de un elemento.

onkeydown

Activa la acción cuando se pulsa una tecla.

onkeypress

Activa la acción mientras está pulsada una tecla.

onkeyup

Activa la acción cuando se suelta una tecla.

onload

Activa la acción cuando el navegador ha analizado totalmente el documento SVG. Utilice este evento para llamar funciones de inicialización de paso único.

onerror

Activa la acción cuando un elemento no se carga correctamente o se produce otro error.

onabort

Activa la acción si se detiene la carga de la página antes de que el elemento se cargue completamente.

onunload

Activa la acción si se elimina el documento SVG de una ventana o un marco.

onzoom

Activa la acción si se cambia el nivel de zoom del documento.

onresize

Activa la acción cuando se cambia el tamaño de la vista del documento.

onscroll

Activa la acción si la vista se desplaza o se mueve por ella.

Opciones de exportación de SVG optimizada para la web

Hay disponible una nueva opción de exportación a SVG (Archivo > Exportar > SVG). El nuevo flujo de trabajo permite generar archivos SVG estandarizados y optimizados para su Web y sus proyectos de diseño de pantalla.

Las opciones disponibles son las siguientes:

  • Estilo: elija cómo se va a almacenar la información de estilos visuales en el marcado de SVG.
    • Atributos de presentación: utiliza atributos XML separados para cada propiedad de estilo individual en cada etiqueta SVG. Este formato es necesario para usar contenidos de SVG con Android Studio.
    • CSS interno: utiliza una sola etiqueta <style> con clases de CSS y comparte los ajustes del estilo entre objetos con los mismos estilos. Esto puede generar archivos de menor tamaño.
    • Estilo en línea: utiliza un único atributo “style“ por etiqueta SVG, que incluye todas las propiedades de estilo de la etiqueta combinados en la sintaxis de CSS.

Nota: La opción predeterminada de estilo para SVG es Atributos de presentación porque optimiza la compatibilidad con herramientas de desarrollo de uso general, como Android Studio.

  • Fuente. Seleccione cómo se van a representar las fuentes en el archivo SVG. Los contornos conservan la definición del trazado , y son los que mayor compatibilidad ofrecen.
  • Imágenes: elija si desea que las imágenes se guarden como elementos incrustados en el documento o como archivos enlazados externos al documento.
  • Identificadores de objeto: seleccione la asignación de los tipos de ID (nombres) a los objetos en el archivo SVG. Elija entre Nombres de capa, Mínimo o Único. Esta opción determina cómo se gestionan los nombres duplicados de objetos y el modo en que aparecen los objetos en el CSS exportado.
  • Decimal: seleccione la cantidad de información que desea conservar acerca de la precisión de las ubicaciones del objeto. Un valor más alto de Decimal aumenta la precisión de la disposición de los objetos y esto incrementa la fidelidad visual del SVG procesado. Sin embargo, al aumentar el valor de Decimal también aumenta el tamaño del archivo SVG exportado.
  • Minimizar: optimiza el tamaño del archivo SVG, ya que elimina grupos vacíos y espacios en blanco. Al elegir esta opción, se reduce la legibilidad del código SVG resultante.
  • Flexible. Al activar esta opción, se garantiza que el archivo SVG generado se adapta al navegador. No se escribe ningún valor de tamaño absoluto.
  • Mostrar código: abre el contenido exportado en el editor de texto predeterminado.
  • Mostrar en navegador (icono): muestra la imagen en el navegador web predeterminado.
Logotipo de Adobe

Inicia sesión en tu cuenta