Guía del usuario Cancelar

SVG

Buscar
  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. Aprenda más rápido con el panel Descubrir de Illustrator
      3. Creación de documentos
      4. Barra de herramientas
      5. Métodos abreviados de teclado predeterminados
      6. Personalizar métodos abreviados de teclado
      7. Introducción a las mesas de trabajo
      8. Organizar mesas de trabajo
      9. Personalizar el espacio de trabajo
      10. Panel Propiedades
      11. Configuración de preferencias
      12. Espacio de trabajo táctil
      13. Compatibilidad con Microsoft Surface Dial en Illustrator
      14. Deshacer ediciones y administrar el historial del diseño
      15. Rotar vista
      16. Reglas, cuadrículas y guías
      17. Accesibilidad en Illustrator
      18. Modo seguro
      19. Modo de visualización de la ilustración
      20. Uso de Touch Bar con Illustrator
      21. Archivos y plantillas
    3. Herramientas en Illustrator
      1. Herramientas de un vistazo
      2. Selección de herramientas
        1. Selección
        2. Selección directa
        3. Selección de grupos
        4. Varita mágica
        5. Lazo
        6. Mesa de trabajo
      3. Herramientas de navegación
        1. Mano
        2. Rotar vista
        3. Zoom
      4. Herramientas de pintura
        1. Degradado
        2. Malla
        3. Creador de formas
      5. Herramientas de texto
        1. Texto
        2. Texto en trazado
        3. Texto vertical
      6. Herramientas de dibujo
        1. Pluma
        2. Añadir Punto de ancla
        3. Eliminar Puntos de ancla
        4. Punto de ancla
        5. Curvatura
        6. Segmento de línea
        7. Rectángulo
        8. Rectángulo redondeado
        9. Elipse
        10. Polígono
        11. Estrella
        12. Pincel
        13. Pincel de manchas
        14. Lápiz
        15. Shaper
        16. Sector
      7. Modificación de herramientas
        1. Rotar
        2. Reflejar
        3. Escala
        4. Distorsionar
        5. Anchura
        6. Transformación libre
        7. Cuentagotas
        8. Fusión
        9. Borrador
        10. Tijeras
    4. Acciones rápidas
      1. Texto retro
      2. Texto con resplandor de neón
      3. Vieja escuela texto
      4. Volver a colorear
      5. Convertir boceto en vector
  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. Compartir documentos para revisar
      4. Ampliar el almacenamiento en la nube de Adobe Illustrator
      5. 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. Dibujar cuadrículas rectangulares y polares
      7. Dibujar y editar destellos
      8. Calco de imagen
      9. Simplificar un trazado
      10. Herramientas y conjuntos de símbolos
      11. Ajustar segmentos de trazado
      12. Diseñar una flor en cinco sencillos pasos
      13. Crear y editar una cuadrícula de perspectiva
      14. Dibujar y modificar objetos en una cuadrícula de perspectiva
      15. Usar objetos como símbolos para uso repetido
      16. Dibujar trazados con pixelado perfecto en flujos de trabajo web
    2. Objetos y materiales 3D
      1. Acerca de los efectos 3D en Illustrator
      2. Crear gráficos 3D
      3. Mapear ilustraciones en objetos 3D
      4. Crear texto 3D
      5. Crear objetos 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 en segundos usando un mensaje de texto simple
      9. Volver a colorear su 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. Copiar y duplicar objetos
      8. Rotar y reflejar objetos
      9. Entrelazar 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. Añadir texto y trabajar con objetos tipográficos
      2. Crear listas numeradas y con viñetas
      3. Administrar área de texto
      4. Fuentes y tipografía
      5. Identificar fuentes de imágenes y texto delineado
      6. Agregar formato básico al texto
      7. Agregar formato avanzado al texto
      8. Importar y exportar texto
      9. Aplicar formato a párrafos
      10. Caracteres especiales
      11. Crear texto en un trazado
      12. Estilos de carácter y de párrafo
      13. Tabulaciones
      14. Encontrar fuentes que faltan (flujo de trabajo de Typekit)
      15. Texto en árabe y hebreo
      16. Fuentes | Preguntas frecuentes y soluciones de problemas
      17. Crear efecto de texto 3D
      18. Diseños de tipografía creativos
      19. Ampliar y rotar texto
      20. Espaciado entre líneas y caracteres
      21. Separación de sílabas y saltos de línea
      22. Ortografía y diccionarios de idiomas
      23. Aplicar formato de caracteres asiáticos
      24. Modos de composición de alfabetos asiáticos
      25. Crear diseños de texto con objetos de fusión
      26. Crear un póster con texto con Calco de imagen
    8. Crear efectos especiales
      1. Trabajar con efectos
      2. Estilos gráficos
      3. Atributos de apariencia
      4. Crear bosquejos y mosaicos
      5. Sombras paralelas, resplandor y desvanecimiento
      6. Resumen de efectos
    9. Gráficos web
      1. Métodos óptimos para crear gráficos web
      2. Gráficas
      3. SVG
      4. Sectores y mapas de imágenes
  6. Importación, exportación y almacenamiento
    1. Importación
      1. Colocar varios archivos
      2. Administrar archivos vinculados e incrustados
      3. Información sobre vínculos
      4. Desincrustar imágenes
      5. Importar ilustraciones de Photoshop
      6. Importar imágenes de mapa de bits
      7. Importar archivos Adobe PDF
      8. Importar archivos EPS, DCS y de AutoCAD
    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. Panel Información del documento
  7. Impresión
    1. Prepárese para imprimir
      1. Ajuste de los 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 prestablecidos 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. Formatos de archivo admitidos
    5. Problemas con controladores de dispositivos GPU
    6. Problemas con dispositivos Wacom
    7. Problemas con archivos DLL
    8. Problemas de memoria
    9. Problemas con archivos de preferencias
    10. Problemas de fuentes
    11. Problemas con la impresora
    12. Enviar informe de error a Adobe
    13. Mejora del rendimiento de Illustrator

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

SVG es un formato de gráficos vectoriales que describe imágenes como formas, rutas, 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, a diferencia de GIF, JPEG, WBMP y PNG, que son más pesados. 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. 

Una ilustración se puede guardar en formato SVG utilizando los comandos 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 los comandos 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.

Aplicación de 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. Para aplicar un efecto, realice una de las siguientes acciones:

    Con la configuración por defecto

    Vaya a Efecto > Filtros SVG > Aplicar filtro SVG.

    Con una configuración personalizada

    1. Vaya a Efecto > Filtros SVG > Aplicar filtro SVG.

    2. En el cuadro de diálogo, seleccione el efecto y elija la opción Editar filtro SVG  . Edite el código por defecto y seleccione OK.

    Creación y aplicación de un nuevo efecto

    1. Vaya a Efecto > Filtros SVG > Aplicar filtro SVG.

    2. En el cuadro de diálogo, seleccione el efecto y elija la opción Nuevo filtro SVG  . Introduzca el nuevo código y seleccione 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 de SVG consistirá en un objeto rasterizado.

Importación de 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 seleccione Abrir.

Información general del panel Interactividad SVG

El panel Interactividad SVG permite ver todos los eventos y archivos de JavaScript asociados al archivo actual.
Puede utilizar 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 crear movimiento rápidamente en una página web cuando el usuario realice una acción, como mover el cursor del ratón sobre un objeto.

Eliminar un evento del panel Interactividad SVG

Puede usar el panel Interactividad SVG para eliminar uno o todos los eventos.

Para eliminar un evento

  • Seleccione el evento y elija Quitar entrada seleccionada  .

Para eliminar todos los eventos

  • Seleccione Borrar eventos en el menú del panel  . 

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

Seleccione Enlazar archivos JavaScript   y elija Añadir para añadir archivos JavaScript adicionales; para eliminar la entrada JavaScript seleccionada, elija Eliminar.

Añadir de Interactividad SVG a ilustraciones

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

  2. Introduzca el archivo JavaScript correspondiente y presione 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.

Sugerencias para la creación de archivos SVG

  • 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.

  • Los datos de rasterizado no son escalables en el Visor SVG y no se pueden editar al igual que otros elementos SVG. Puede evitar crear ilustraciones que se rastericen en el archivo SVG. Utilice los efectos de filtro SVG para añadir efectos de gráfico sin rasterizar.

  • Utilice símbolos y simplifique las rutas de la ilustración para mejorar el rendimiento de SVG. Asimismo, evite la utilización de pinceles que produzcan muchos datos de ruta, 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.

Opciones de exportación de SVG optimizada para la web

Hay disponible una nueva opción de exportación a SVG (Archivo > Exportar > Exportar como > SVG). El nuevo flujo de trabajo permite generar archivos SVG estandarizados y optimizados para su Web y sus proyectos de diseño de pantalla. Para obtener más información, consulte Opciones de exportación de SVG.

Recursos relacionados

Póngase en contacto con nosotros

Pregunte a la comunidad

Si tiene preguntas o desea compartir una idea, participe en la comunidad de Adobe Illustrator. Nos encantaría conocer su opinión.

Logotipo de Adobe

Inicia sesión en tu cuenta

Vínculos rápidos

Ver todos los planes Administrar los planes

Avisos legales    |    Política de privacidad en línea