Scalable Vector Graphics en HTML5

Conceptos básicos y uso

Scalable Vector Graphics (SVG) es parte de la familia de gráficos vectoriales. Tiene varias ventajas frente a sus contrapartes de trama: JPEG, GIF y PNG. En este artículo explore los conceptos básicos y el uso de los gráficos SVG en HTML5. Aprenda acerca de dibujo, filtros, gradientes, texto y cómo agregar SVG XML a páginas web.

Jeremy J. Wischusen, Web Application Architect, Binary Neuron L.L.C.

Jeremy Wischusen photoJeremy Wischusen tiene más de 13 años de experiencia en el diseño de sitios web y aplicaciones para clientes tales como Purple Communications, myYearbook.com, HBO y otros, en la construcción de sistemas backend y de primer plano con Flash, Flex, jQuery, PHP, MySQL, MSSQL y PostgreSQL. Ha enseñado diseño web, Flash y ActionScript a clientes tales como Wyeth Pharmaceuticals, The Vanguard Group, Bucks County Community College y The University of the Arts.



13-07-2012

Introducción

Scalable Vector Graphics (SVG) es parte de la familia de gráficos basados en vectores. Es diferente a los gráficos basados en trama, los cuales almacenan la definición de color por cada píxel en una serie de datos. Los formatos basados en trama más comunes actualmente en la web son JPEG, GIF y PNG, y cada uno de estos formatos tiene sus puntos fuertes y sus debilidades.

Abreviaciones de uso frecuente

  • CSS: Cascading Style Sheets
  • GIF: Graphics Interchange Format
  • GUI: Graphical user interface
  • HTML: Hypertext Markup Language
  • JPEG: Joint Photographic Experts Group
  • PNG: Portable Network Graphics
  • SVG: Scalable Vector Graphics
  • XML: Extensible Markup Language

SVG tiene varias ventajas frente al formato basado en trama:

  • Los gráficos SVG se crean utilizando fórmulas matemáticas que requieren almacenar muchos menos datos en el archivo fuente porque no se necesita almacenar los datos por cada píxel individual.
  • Las imágenes de vector se escalan mejor. Con imágenes en la web, intentar escalar una imagen desde su tamaño original puede dar como resultado imágenes distorsionadas (o pixeladas).

    Los datos originales de píxel fueron diseñados para un tamaño específico. Cuando la imagen ya no tiene ese tamaño, el programa que despliega la imagen interpreta qué datos debe utilizar para llenar los nuevos píxeles. Las imágenes de vector son más resistentes; cuando el tamaño de la imagen cambia, las fórmulas matemáticas se pueden ajustar según corresponda.

  • El tamaño del archivo fuente tiende a ser más pequeño, por ello, los gráficos SVG se cargan más rápido que sus contrapartes de trama y utilizan menos ancho de banda.
  • Las imágenes SVG son renderizadas por el navegador y se pueden obtener por programa. Se pueden cambiar dinámicamente, haciéndolas especialmente adecuadas para las aplicaciones dirigidas por datos, como los diagramas.
  • El archivo fuente de una imagen SVG es un archivo basado en texto, es decir que se puede acceder al mismo y se puede usar con navegador.

En este artículo, aprenda más acerca de los beneficios de los formatos SVG y cómo pueden ayudar en sus esfuerzos de diseño web en HTML5.


Fundamentos de SVG

Para crear un gráfico SVG utilice un proceso completamente distinto que el utilizado para crear un archivo JPEG, GIF o PNG. Habitualmente, los archivos JPEG, GIF y PNG se crean con un programa de edición de imagen como Adobe Photoshop. Por lo general, las imágenes SVG se crean usando lenguaje basado en XML. Hay interfaces GUI de edición SVG con las que usted puede generar XML subyacente. Sin embargo, en este artículo se presume que usted está trabajando con el XML primario. Consulte Recursos para obtener más información acerca de los programas de edición SVG.

El Listado 1 muestra un ejemplo de un archivo simple SVG XML que dibuja un círculo rojo con un borde negro de 2 píxeles.

Listado 1. Archivo XML SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle  cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="red" />
</svg>

El código anterior da como resultado el dibujo de la Figura 1.

Figura 1. Círculo rojo con borde negro de 2 píxeles
Círculo rojo con borde negro de 2 píxeles

Crear formas básicas

Con los gráficos SVG, utilice etiquetas XML para crear formas, y la Tabla 1 muestra estos elementos XML.

Tabla 1. Elementos XML para crear gráficos SVG
ElementoDescripción
lineCrea una línea simple.
polylineDefine formas construidas a partir de múltiples definiciones de línea.
rectCrea un rectángulo.
circleCrea un círculo.
ellipseCrea una elipse.
polygonCrea un polígono.
pathPermite definir rutas arbitrarias.

El elemento line

El elemento line es el elemento básico de dibujo. El Listado 2 muestra cómo crear una línea horizontal.

Listado 2. Crear una línea horizontal
<svg xmlns="http://www.w3.org/2000/svg" version='1.1'
 width="100%" height="100%" >
   <line x1='25' y1="150" x2='300' y2='150'
           style='stroke:red;stroke-width:10'/>
 </svg>

El código del Listado 2 da como resultado el dibujo de la Figura 2.

Figura 2. Línea horizontal básica
Línea horizontal básica

La etiqueta raíz SVG tiene atributos de ancho y alto que definen el área del bastidor disponible para dibujar. Funcionan como los atributos de alto y ancho de los elementos HTML. En este caso, el bastidor está configurado para ocupar todo el espacio disponible.

El ejemplo también utiliza la etiqueta style . Los gráficos SVG soportan manejo de estilo de su contenido con una variedad de métodos. Los estilos de este artículo son incluidos para hacerlos sobresalir o cuando ciertos atributos tales como una pincelada de colores y los grosores son necesarios para renderizar el dibujo. Recursos tiene más información acerca del manejo de estilo de los gráficos SVG.

Usted puede crear una definición de línea estableciendo las coordenadas x e y de principio y fin relativas al bastidor. Los atributos x1 e y1 son las coordenadas de principio y los atributos x2 e y2 son las coordenadas de fin. Para cambiar la dirección de la línea, simplemente cambie las coordenadas. Por ejemplo, al modificar el ejemplo anterior usted puede producir una línea diagonal como se muestra en el Listado 3.

Listado 3. Crear una línea diagonal
                <svg xmlns="http://www.w3.org/2000/svg" version='1.1'
                width="100%" height="100%" >
                    <line x1="0" y1="0" x2="200" y2="200"
                        style='stroke:red;stroke-width:10'/>
                </svg>

La Figura 3 muestra el resultado del código del Listado 3.

Figura 3. Línea diagonal
Línea diagonal

El elemento polyline

Una línea poligonal es un dibujo compuesto de múltiples definiciones de línea. El ejemplo del Listado 4 crea un dibujo que tiene la apariencia de una escalera.

Listado 4. Creando escaleras de líneas poligonales
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
   <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
         style="fill:white;stroke:red;stroke-width:4"/>
</svg>

El código del Listado 4 da como resultado el dibujo de la Figura 4.

Figura 4. Escaleras de líneas poligonales
Escaleras de líneas poligonales

Usted puede crear una línea poligonal utilizando el atributo points y definiendo pares de coordenadas x e y separadas por comas. En el ejemplo, el primer punto es definido como 0,40 , donde 0 es el valor x y 40 es el valor y. Sin embargo, no alcanza con un conjunto de puntos para hacer que se muestre algo en la pantalla porque eso sólo le indica al renderizador SVG dónde comenzar. Como mínimo, necesita dos conjuntos de puntos: un punto de inicio y un punto de finalización (por ejemplo, points="0,40 40,40”).

Al igual que con los dibujos de línea simple, las líneas no necesitan ser estrictamente horizontales o verticales. Si cambia los valores del ejemplo anterior, como en el Listado 5, usted puede producir formas de línea irregular.

Listado 5. Crear una línea irregular
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
         style="fill:white;stroke:red;stroke-width:3"/>
</svg>

El código del Listado 5 da como resultado el dibujo de la Figura 5.

Figura 5. Línea irregular
Línea irregular

El elemento rect

Crear un rectángulo es tan simple como definir un ancho y un alto, como se muestra en el Listado 6.

Listado 6. Crear un rectángulo
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
    <rect width="300" height="100"
          style="fill:red"/>
</svg>

El código del Listado 6 da como resultado el dibujo de la Figura 6.

Figura 6. Rectángulo
Rectángulo

También puede crear un cuadrado con la etiqueta rect ; un cuadrado es simplemente un rectángulo en el que el alto y el ancho son iguales.

El elemento circle

Usted puede crear un círculo definiendo las coordenadas x e y del centro del círculo y un radio, como se muestra en el Listado 7.

Listado 7. Crear un círculo
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" fill="red"/>
</svg>

El código del Listado 7 da como resultado el dibujo de la Figura 7.

Figura 7. Círculo
Círculo

Los atributos cx y cy definen el centro del círculo relativo al bastidor de dibujo. Dado que el radio tiene la mitad del ancho del círculo, al definir el radio, recuerde que el ancho total de la imagen será el doble del valor.

El elemento ellipse

Una elipse es básicamente un círculo con código que define dos radios, como se muestra en el Listado 8.

Listado 8. Crear una elipse
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;"/>
                </svg>

El código del Listado 8 da como resultado el dibujo de la Figura 8.

Figura 8. Elipse
Elipse

Nuevamente, los atributos cx y cy definen las coordenadas del centro relativas al bastidor. Con una elipse, no obstante, tiene que definir un radio para el eje x y uno para el eje y, utilizando los atributos rx y ry .

El elemento polygon

Un polígono es una forma que tiene por lo menos tres lados. El Listado 9 crea un triángulo simple.

Listado 9. Crear un triángulo
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <polygon points="200,10 250,190 160,210"
                        style="fill:red;stroke:black;stroke-width:1"/>
                </svg>

El código del Listado 9 da como resultado el dibujo de la Figura 9.

Figura 9. Polígono triángulo
Polígono triángulo

De forma similar que con el elemento polyline usted puede crear polígonos definiendo pares de coordenadas x e y, utilizando el atributo points .

Puede crear polígonos con cualquier cantidad de lados agregando pares x e y. Modificando el ejemplo anterior usted puede crear un polígono de cuatro lados, como se muestra en el Listado 10.

Listado 10. Crear un polígono de cuatro lados
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <polygon points="220,10 300,210 170,250 123,234"
                        style="fill:red;stroke:black;stroke-width:1"/>
                </svg>

El código del Listado 10 da como resultado el dibujo de la Figura 10.

Figura 10. Polígono de cuatro lados
Polígono de cuatro lados

Puede incluso crear formas complejas utilizando la etiqueta polygon . El Listado 11 crea un dibujo de una estrella.

Listado 11. Crear una estrella
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <polygon points="100,10 40,180 190,60 10,60 160,180 100,10"
            style="fill:red;stroke:black;stroke-width:1"/>
</svg>

El código del Listado 11 da como resultado el dibujo de la Figura 11.

Figura 11. Polígono estrella
Polígono estrella

El elemento path

Con el elemento path , el más complejo de todos los elementos de dibujo, usted puede crear dibujos arbitrarios utilizando un conjunto de comandos especializados. El elemento path soporta los comandos de la Tabla 2.

Tabla 2. Comandos soportados por el elemento path
ComandoDescripción
MMoverse a
LLínea a
HLínea horizontal a
VLínea certical a
CCurva a
SCurva leve a
QCurva de Bézier a
TCurva de Bézier leve a
AArco elíptico a
ZCerrar camino a

Usted puede utilizar estos comandos en mayúsculas o minúsculas. Cuando el comando está en mayúsculas, se aplica el posicionamiento absoluto. Cuando el comando está en minúsculas, se aplica el posicionamiento relativo. Proporcionar ejemplos de todos los comandos está fuera del alcance de este artículo. Sin embargo, los ejemplos siguientes demuestran su uso básico.

Usted puede crear cualquiera de las formas simples de los ejemplos anteriores de este artículo utilizando el elemento path. El Listado 12 crea un triángulo básico usando el elemento path.

Listado 12. Crear un triángulo usando el elemento path
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" style="fill:red"/>
</svg>

El código del Listado 12 da como resultado el dibujo de la Figura 12.

Figura 12. Triángulo creado utilizando el elemento path
Triángulo creado utilizando el elemento path

La lista de comandos se define utilizando el atributo d . En este ejemplo, el dibujo comienza en una coordenada x de 150 y en una coordenada y de 0, como lo define el comando moverse a (M150 0). Luego, dibuja una línea a las coordenadas x/y donde x = 75 e y = 200 utilizando el comando línea a (L75 200). Después, dibuja otra línea utilizando otra línea para el comando (L225 200). Finalmente, el dibujo se cierra utilizando el cierre para el comando (Z). No se proveen coordenadas con el comando Z porque para cerrar la ruta, por definición, usted está dibujando una línea desde la posición actual de vuelta al punto de partida del dibujo (en este caso, x = 150 e y =0).

La intención en este punto era mostrar un ejemplo básico; si lo que quiere crear es un triángulo simple le conviene utilizar la etiqueta polygon.

El poder real del elemento path es la capacidad de crear formas personalizadas, como se muestra en el Listado 13. El ejemplo proviene de un documento de W3C (World Wide Web Consortium), SVG (Scalable Vector Graphics) 1.1 (Segunda Edición) (consulte Recursos).

Listado 13. Crear una forma personalizada usando el elemento path
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
                fill="red" stroke="blue" stroke-width="5"/>
       <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
                 fill="yellow" stroke="blue" stroke-width="5"/>
       <path d="M600,350 l 50,-25
                 a25,25 -30 0,1 50,-25 l 50,-25
                 a25,50 -30 0,1 50,-25 l 50,-25
                 a25,75 -30 0,1 50,-25 l 50,-25
                 a25,100 -30 0,1 50,-25 l 50,-25"
                 fill="none" stroke="red" stroke-width="5"/>
</svg>

El código del Listado 13 da como resultado el dibujo de la Figura 13.

Figura 13. Forma personalizada creada utilizando el elemento path
Forma personalizada creada utilizando el elemento path

Con el elemento path usted puede crear dibujos complejos tales como diagramas y líneas onduladas. Note que este ejemplo utiliza elementos múltiples path . Cuando crea dibujos usted no está limitado a un solo elemento de dibujo dentro de la etiqueta de raíz SVG.


Filtros y gradientes

Además de las funciones básicas de estilo de CSS de varios de los ejemplos presentados hasta el momento, los gráficos SVG también soportan el uso de filtros y gradientes. En esta sección, aprenda cómo aplicar filtros y gradientes a dibujos SVG.

Filtros

Usted puede utilizar filtros para aplicar efectos especiales a los gráficos SVG. SVG soporta los siguientes filtros.

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

Consulte Recursos para obtener una explicación detallada acerca del uso de estos filtros.

El Listado 14 crea un efecto de sombra proyectada que se aplica a un rectángulo.

Listado 14. Crear un efecto de sombra proyectada para un rectángulo
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          <defs>
                   <filter id="f1" x="0" y="0"
                             width="200%" height="200%">
                         <feOffset result="offOut" in="SourceAlpha"
                              dx="20" dy="20"/>
                         <feGaussianBlur result="blurOut"
                               in="offOut" stdDeviation="10"/>
                         <feBlend in="SourceGraphic"
                                in2="blurOut" mode="normal"/>
                    </filter>
         </defs>
          <rect width="90" height="90" stroke="green"
                   stroke-width="3" fill="yellow" filter="url(#f1)"/>
</svg>

El código del Listado 14 da como resultado el dibujo de la Figura 14.

Figura 14. Efecto de sombra proyectada para un rectángulo
Efecto de sombra proyectada para un rectángulo

Defina filtros dentro del elemento def (para definiciones). Al filtro de este ejemplo se le asigna un id de "f1". La misma etiqueta filter tiene atributos para definir las coordenadas x e y, y el ancho y el alto del filtro. Dentro de la etiqueta filter utilice los elementos de filtro deseados y configure sus propiedades para los valores deseados.

Después de definir el filtro, asócielo con un dibujo en particular utilizando el atributo filter , como se muestra en el elemento rect. Asigne el valor de url al valor del atributo id al cual le asignó el filtro.

Gradientes

Un gradiente es una transición gradual de un color a otro. Los gradientes vienen en dos formas básicas: lineal y radial. El tipo de gradiente aplicado es determinado por el elemento que usted utiliza. Los ejemplos siguientes muestran gradientes lineales y radiales aplicados a una elipse.

El Listado 15 crea una elipse con un gradiente lineal.

Listado 15. Crear una elipse con gradiente lineal
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <defs>
            <linearGradient id="grad1" x1="0%" y1="0%"
                     x2="100%" y2="0%">
           <stop offset="0%"
                     style="stop-color:rgb(255,255,0);stop-opacity:1"/>
           <stop offset="100%"
                     style="stop-color:rgb(255,0,0);stop-opacity:1"/>
           </linearGradient>
         </defs>
         <ellipse cx="200" cy="70" rx="85" ry="55"
                        fill="url(#grad1)"/>
</svg>

El código del Listado 15 da como resultado el dibujo de la Figura 15.

Figura 15. Elipse con gradiente lineal
Elipse con gradiente lineal

El Listado 16 crea una elipse con gradiente lineal.

Listado 16. Crear una elipse con gradiente radial
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
             <defs>
                     <radialGradient id="grad1" cx="50%" cy="50%"
                            r="50%" fx="50%" fy="50%">
                     <stop offset="0%"
                            style="stop-color:rgb(255,255,255);stop-opacity:0"/>
                     <stop offset="100%"
                            style="stop-color:rgb(255,0,0);stop-opacity:1"/>
                     </radialGradient>
             </defs>
             <ellipse cx="200" cy="70" rx="85" ry="55"
                     fill="url(#grad1)"/>
</svg>

El código del Listado 16 da como resultado el dibujo de la Figura 16.

Figura 16. Elipse con gradiente radial
Elipse con gradiente radial

Los gradientes, al igual que los filtros, son definidos dentro del elemento def . A cada gradiente se le asigna un id. Los atributos de gradiente, tales como los colores, son configurados dentro de la etiqueta gradiente usando elementos stop . Para aplicar un gradiente a un dibujo, asigne el valor de url para el atributo fill al id del gradiente deseado.


Texto y SVG

Además de las formas básicas, usted también puede utilizar SVG para generar texto, como se muestra en el Listado 17.

Listado 17. Crear texto con SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <text x="0" y="15" fill="red">I love SVG</text>
</svg>

El código del Listado 17 da como resultado el dibujo de la Figura 17.

Figura 17. Texto SVG
Texto SVG

El ejemplo utiliza un elemento text para crear la oración I love SVG. Cuando usted usa el elemento text el texto que se mostrará realmente está dentro de un elemento de apertura y de cierre text.

Usted puede mostrar el texto a lo largo de numerosos ejes e incluso en rutas. El Listado 18 muestra un texto en una ruta arqueada.

Listado 18. Crear texto en una ruta arqueada
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
                  <path id="path1" d="M75,20 a1,1 0 0,0 100,0"/>
        </defs>
        <text x="10" y="100" style="fill:red;">
                   <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
         </text>
</svg>

El código del Listado 18 da como resultado el dibujo de la Figura 18.

Figura 18. Texto en una ruta arqueada
Texto en una ruta arqueada

En este ejemplo, se agrega un espacio de nombres XML adicional xlink a la etiqueta raíz SVG. La ruta utilizada para arquear el texto se crea dentro del elemento def de modo que la ruta no es renderizada realmente como parte del dibujo. El texto a mostrar se anida dentro de un elemento textPath que utiliza el espacio de nombres xlink para referirse al id de la ruta deseada.

Al igual que con otros dibujos SVG, usted también puede aplicar filtros y gradientes a texto. El Listado 19 aplica un filtro y un gradiente a un texto.

Listado 19. Crear texto con un filtro y un gradiente
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
                    <radialGradient id="grad1" cx="50%" cy="50%"
                           r="50%" fx="50%" fy="50%">
                           <stop offset="0%"
                                style="stop-color:red; stop-opacity:0"/>
                           <stop offset="100%"
                               style="stop-color:rgb(0,0,0);stop-opacity:1"/>
                    </radialGradient>
                    <filter id="f1" x="0" y="0"
                               width="200%" height="200%">
                           <feOffset result="offOut"
                               in="SourceAlpha" dx="20" dy="20"/>
                           <feGaussianBlur result="blurOut"
                               in="offOut" stdDeviation="10"/>
                           <feBlend in="SourceGraphic"
                               in2="blurOut" mode="normal"/>
                    </filter>
          </defs>
          <text x="10" y="100" style="fill:url(#grad1); font-size: 30px;"
                        filter="url(#f1)">
                        I love SVG I love SVG
          </text>
</svg>

El código del Listado 19 da como resultado el dibujo de la Figura 19.

Figura 19. Texto con un filtro y un gradiente
Texto con un filtro y un gradiente

Agregar XML SVG a páginas web

Después de crear su XML SVG, hay varias formas de incluirlo en sus páginas HTML. El primer método es incorporar el XML SVG directamente en el documento HTML, como se muestra en el Listado 20.

Listado 20. Incorpore el XML SVG directamente en un documento HTML
<html>
     <head>
             <title>Embedded SVG</title>
     </head>
     <body style="height: 600px;width: 100%; padding: 30px;">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <circle cx="100" cy="50" r="40" fill="red"/>
              </svg>
     </body>
</html>

Este método es quizás el más simple, pero no favorece la reutilización. Recuerde que puede guardar un archivo XML SVG utilizando la extensión .svg. Cuando guarda el dibujo SVG en un archivo .svg, usted puede usar los elementos embed, object, e iframe para incluirlos en sus páginas. El Listado 21 muestra el código a incluir en un archivo XML SVG utilizando un elemento embed .

Listado 21. Incluya un archivo XML SVG utilizando un elemento embed .
<embed src="circle.svg" type="image/svg+xml" />

El Listado 22 muestra cómo incluir un archivo XML SVG utilizando un elemento object .

Listado 22. Incluya un archivo XML SVG utilizando un elemento object .
<object data="circle.svg" type="image/svg+xml"></object>

El Listado 23 muestra el código a incluir en un archivo XML SVG utilizando un elemento iframe .

Listado 23. Incluya un archivo XML SVG utilizando un elemento iframe .
<iframe src="circle1.svg"></iframe>

Al utilizar uno de estos métodos usted puede incluir el mismo dibujo SVG en múltiples páginas y hacer actualizaciones editando el archivo fuente .svg.


Resumen

Este artículo ha tratado los fundamentos de la creación de dibujos utilizando el formato SVG. Usted ha aprendido a crear formas básicas utilizando los elementos geométricos incorporados tales como la línea, el rectángulo, el círculo y demás. También ha aprendido cómo utilizar el elemento path para crear dibujos complejos emitiendo una serie de comandos tales como moverse a, línea a y arco a. Este artículo también investigó cómo aplicar filtros y gradientes a dibujos SVG, incluyendo dibujos de texto y cómo incluir sus gráficos SVG en páginas HTML.

Recursos

Aprender

Obtener los productos y tecnologías

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Linux
ArticleID=825124
ArticleTitle=Scalable Vector Graphics en HTML5
publish-date=07132012