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

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 ofrece 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.svgde 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 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 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.

Eliminación de 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.

Listado, adición o eliminación de 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 puntero.

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 a 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 cambia a panorámica.

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 desea que se escriba el código resultante en el archivo SVG. Elija entre CSS interno, Estilo en línea o Atributos de presentación.
  • 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 ennavegador (icono): muestra la imagen en el navegador web predeterminado.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

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