Guía del usuario Cancelar

SVG

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.

Vínculo profundo de Adobe Illustrator

Pruébelo en la aplicación
Aplique filtros SVG en unos sencillos pasos.

Acerca de SVG

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, 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 (filtros) 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. 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 ofrece un conjunto estándar de efectos de SVG. Puede aplicar un efecto predeterminado directamente o editar el código XML para personalizarlo. También puede crear nuevos efectos SVG.

Nota:

Para modificar los filtros SVG predeterminados de Illustrator, edite el archivo Adobe SVG Filters.svg en esta ubicación usando un editor de texto:

  • macOS: ~/Library/Application Support/Adobe/Adobe Illustrator <version>/<locale>
  • Windows: C:\Users\<username>\AppData\Roaming\Adobe\Adobe Illustrator <version> Settings\<locale>\x64

Puede modificar las definiciones de los filtros existentes, eliminarlas y añadir otras nuevas.

Aplicar un efecto predeterminado

  1. Seleccione un objeto o grupo (o una capa en el panel Capas).

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

Aplicar un efecto personalizado

  1. Seleccione un objeto o grupo (o una capa en el panel Capas).

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

  3. En el cuadro de diálogo, seleccione un efecto y elija Editar filtro SVG  . Edite el código por defecto y seleccione OK.

Crear y aplicar un nuevo efecto

  1. Seleccione un objeto o grupo (o una capa en el panel Capas).

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

  3. En el cuadro de diálogo, seleccione 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 efecto cuando un objeto utiliza varios. En otras palabras, 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 se convierte en <g id="Button1_ver3.0"> en el archivo SVG). Las capas anidadas se convierten en grupos anidados del SVG y las capas ocultas se conservan con 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 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.

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.

Temas similares

¿Tiene alguna pregunta o idea?

Pregunte a la comunidad

Si tiene alguna pregunta que formular o una idea que compartir, entre y participe en la Comunidad de Adobe Illustrator. Nos gustaría conocer sus comentarios y ver sus creaciones.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?