Gráficos vectoriales escalables

Índice
Introducción
Orígenes
Contenido general
Ventajas de SVG[3]
SVG usa formato XML
Estructura básica de un SVG
Tipos de objetos gráficos
Elementos geométricos SVG
Atributos
Líneas
Rectángulos
Círculo
Elipse
Mixtilínea
Texto
Agrupaciones
Duplicados
Duplicado de objetos svg
Enlazado de imágenes
Recortes
Transformaciones
Animaciones
Navegadores que soportan SVG
Software de edición
Véase también
Referencias
Enlaces externos
Ejemplos y manuales

Introducción
Gráficos vectoriales escalables, o gráficos vectoriales
redimensionables (del inglés Scalable Vector Gráficos Vectoriales Escalables
Graphics) o SVG es un formato de gráficos vectoriales
bidimensionales, tanto estáticos como animados, en
formato de lenguaje de marcado extensible XML
(Extensible Markup Language), es decir que se
compone por código y cuya especificación es un
estándar abierto desarrollado por el W3C desde 1999.

Las imágenes SVG y sus comportamientos se definen

en archivos de texto XML. Esto significa que se pueden
buscar, indexar, codificar y comprimir. Como archivos
XML, las imágenes SVG se pueden crear y editar con
cualquier editor de texto o comúnmente editor de
código, así como con software de dibujo.

SVG es un lenguaje usado para dibujar y representar

gráficos, imágenes, logotipos es decir gráficos, estos
pueden manipularse con CSS y JavaScript, estos
gráficos fueron creados para que se puedan representar Desarrollador
o renderizar en la web y en los navegadores, este World Wide Web Consortium
lenguaje de marcado se convirtió en una recomendación w3.org/Graphics/SVG/ (http://www.w3.org/Graphi
del W3C en septiembre de 2001, por lo que ya ha sido cs/SVG/)
incluido de forma nativa en el navegador web del W3C
Información general
Amaya. Las versiones 1.5 y posteriores de Mozilla
Firefox soportan gráficos hechos con SVG, así como el Extensión de .svg, .svgz
navegador Opera que desde su versión 8 ha archivo
implementado SVG 1.1 Tiny en su núcleo. Tipo de MIME image/svg+xml1
Navegadores como Google Chrome, Safari e Internet Uniform Type public.svg-image
Explorer 9 también son capaces de mostrar imágenes en
Identifier
formato SVG sin necesidad de complementos externos.
Otros navegadores web como versiones anteriores a la Lanzamiento 4 de septiembre de 2001
9 de Internet Explorer, necesitan un conector o plug-in. inicial
Última versión 1.1 (segunda edición)
Los dibujos, imágenes o gráficos SVG a diferencia de 16 de agosto de 2011 (9 años, 5
los dibujos en otros formatos como los Webp, JPG, meses y 21 días)
PNG, TIFF (Rasters) entre otros, pueden ser
interactivos y dinámicos y esto se debe a que no se Tipo de formato Gráfico vectorial
componen por mapa de bits, estos están compuesto por Extendido de XML
vectores y estos son instrucciones matemáticas que le Formato abierto
damos al navegador o programas de ediciones de estos
gráficos, los gráficos vectoriales para escalarlo de
manera infinita y no perder resolución o calidad en la imagen, dibujo etc.

Orígenes
Imagen estática
En 1996, Chris Liley redactó para el W3C un documento con directrices sobre generada desde un
los posibles requerimientos para integrar un formato estándar de archivo para ejemplo SVG. El fichero
describir elementos gráficos vectoriales. Para 1998 varias empresas habían original requiere un
turnado propuestas a este organismo, de las cuales dos principalmente sirvieron navegador con soporte
como base para los borradores que constituirían el SVG: el VML desarrollado nativo o mediante plugin.
por Microsoft para su formato de documentos RTF y el PGML desarrollado
entonces por Adobe en coordinación con IBM, Netscape y SUN. Tras la
publicación del estándar SVG, Microsoft disoció el VML arguyendo que era un producto ya en el mercado,
mientras que Adobe celebró abiertamente estandarización del PGML; el soporte para SVG fue integrado a
distintos productos de software de esta última compañía como Adobe Illustrator y el visualizador de archivos
ASV.2
Contenido general

Ventajas de SVG3

Las ventajas de usar SVG sobre otros formatos de

imagen son que estas se pueden:

Crear y editar con cualquier editor de texto

Buscar, indexar, codificar y comprimir
imprimir con alta calidad en cualquier
resolución
ampliar sin perder calidad de imagen o grafico, La imagen ilustra una diferencia entre mapas de
Los gráficos SVG NO pierden calidad si se bits e imágenes vectoriales. La imagen vectorial
amplían o cambian de tamaño puede ser redimensionada, tanto como se
Las imágenes SVG son escalables requiera, sin pérdida de calidad de imagen. Esto
no es así con un mapa de bits.
SVG es un estándar abierto
Los archivos SVG son XML puro

SVG usa formato XML

Para poder entender un poco SVG desde el código se debe tener un conocimiento básico de HTML y XML
básico.

Por lo tanto debe llevar

Etiquetas de apertura y cierre (Al igual que HTML)

Atributos.
Como dialecto XML, requiere que se defina el namespace, de lo contrario el navegador no lo
interpretará correctamente.

Estructura básica de un SVG

El código SVG debe llevar:

viewBox.
xmlns.
1 <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" >
2 <title>Estructura basica del SVG</title>
3 <style>
4 .circle {fill: blue}
5 </style>
6 <circle class="circle" cx="5" cy="5" r="5" />
7 </svg>

Tipos de objetos gráficos

La especificación de SVG permite tres tipos de objetos gráficos:

 Elementos geométricos vectoriales, como los caminos o trayectorias consistentes en rectas y
curvas, y áreas limitadas por ellos.
Imágenes de mapa de bits/digitales.
Texto.

Los objetos gráficos pueden ser agrupados, transformados y compuestos en objetos previamente renderizados,
y pueden recibir un estilo común. El texto puede estar en cualquier espacio de nombres XML admitido por la
aplicación, lo que mejora la posibilidad de búsqueda y la accesibilidad de los gráficos SVG. El conjunto de
características incluye las transformaciones anidadas, las trayectorias de recorte, las máscaras alfa, los filtros de
efectos, las plantillas de objetos y la extensibilidad.

El dibujado de los SVG puede ser dinámico e interactivo. El modelo Document Object Model (DOM) para
SVG, que incluye el DOM XML completo, permite animaciones de gráficos vectoriales sencillas y eficientes
mediante ECMAScript o SMIL. Un conjunto amplio de manejadores de eventos, como "onMouseOver" y
"onClick", puede ser asignado a cualquier objeto SVG. Debido a su compatibilidad y relación con otros
estándares de Web, características como el scripting pueden ser aplicadas a elementos SVG y a otros
elementos XML desde distintos espacios de nombre XML simultáneamente y dentro de la misma página web.
Un ejemplo extremo de esto es un juego completo de Tetris realizado como un objeto SVG.4

Si el espacio de almacenamiento es un problema, las imágenes SVG pueden ser guardadas como archivos
comprimidos con gzip, en cuyo caso pasan a ser imágenes SVGZ. Debido a la verbosidad del XML, este
tiende a comprimirse muy bien, y estos ficheros pueden ser mucho más pequeños.

El fichero o archivo vectorizado original (SVG) es más pequeño que la versión de mapa de bits exceptuando
cualquier programa que fuerza a una vectorialización ya que vectorializa detalles en general de poca utilidad,
aproximables por otros métodos o invisibles, a los cuales inserta información oculta y firmas de todo tipo.

Complejidad

Por ser un lenguaje vectorial, SVG permite crear imágenes complejas.

Elementos geométricos SVG

Los elementos geométricos son objetos provistos de atributos genéricos

básicos y optativos o por defecto.

Todos los objetos se encuentran enmarcados en una ventana, con un

ancho (width) y un alto (height) determinados con números enteros. Esta Tomate en SVG
ventana posee un sistema de coordenadas cuyo origen está situado en la
parte superior izquierda y en el cual los valores positivos de x y y se
orientan a la derecha y hacia abajo respectivamente. Cada valor está determinado con números enteros o con
un porcentaje respecto del área de trabajo.

Un sistema de referencia coordenado o un objeto determinado en el estándar se puede modificar mediante

transformaciones. El ejemplo que sigue muestra dos transformaciones: una de posición (traslado) del origen de
coordenadas, mediante la orden "translate" y otra de escala, usando la orden "scale".

<svg width="200" height="200"

xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(50,150)">
<g transform="scale(1,-1)">
...
</g>
 </g>
</svg>

Atributos

Todos los objetos comparten algunos atributos genéricos:

Todo elemento visual de una figura tiene un color con 4

posibles expresiones con el color negro por defecto:

Nominalmente: red, yellow, blue, aqua, salmon,

tomato, orange, lightgreen, etc.5
Con valores hexadecimales: #ff0000, #ffff00, Orientación corregida usada
habitualmente para representación
etc.
gráfica
Con valores hexadecimales resumidos
#abc=#aabbcc: #f00, #ff0, etc.
Funcionales: enteros como rgb(255,32,50) o porcentuales como
rgb(100%,10%,0%).

Toda figura tiene un contorno cuyo grosor y color pueden ser modificados, respectivamente,
usando los parámetros stroke-width y stroke.

Hay tres tipos de uniones de líneas: stroke-linejoin="miter" (para ángulos

menores de 30 grados se aumenta el valor entero del corrector, stroke-miterlimit="4", en
caso contrario se transforma en "bevel"), stroke-linejoin="round" y stroke-
linejoin="bevel" en la imagen respectivamente.

Hay tres tipos de extremos de líneas: stroke-linecap="butt", stroke-

linecap="round" y stroke-linecap="square" en la imagen respectivamente.

Se puede añadir bordes intermitentes siguiendo el patrón marcado por sucesiones de

enteros con stroke-dasharray como por ejemplo stroke-dasharray="2,3,5,7,11,13".

Casi todas las figuras tienen un relleno que puede ser modificado en color, fill, difuminado o
filtrado de distintas formas.

Toda figura tiene una opacidad, opacity, su valor varía entre 0(transparente) y 1(opaco por
defecto).

Líneas
El objeto línea consta básicamente de dos puntos, (x1, y1) y (x2, y2), entre los cuales se dibuja un segmento
recto:

<line x1="..." y1="..." x2="..." y2="..." ... />

Rectángulos

El objeto rectángulo consta básicamente de un punto cuya esquina superior izquierda u origen es (x, y), y sus
dimensiones están representadas por os parámetros height y width:

<rect x="..." y="..." height="..." width="..." ... />

Círculo

El objeto círculo consta de un punto cuyo centro tiene las coordenadas (cx, cy), y su radio es r:

<circle r="..." cx="..." cy="..." ... />

Elipse

El objeto elipse consta de un punto cuyo centro tiene las coordenadas (cx, cy), un radio horizontal, rx, y un
radio vertical, ry:

<ellipse cx="..." cy="..." rx="..." ry="..." ... />

Mixtilínea

El objeto mixtilínea consta básicamente de puntos

unidos por líneas que pueden cerrar o no un espacio.
Estos puntos forman cadenas iniciadas con M o m que
pueden unirse con otras para formar un todo. El uso de
mayúsculas se refiere a valores absolutos de coordenadas
y de minúsculas para los valores relativos, es decir,
considera el último punto dado como el origen de
coordenadas.

<path d="M ... m ... M ... " />

Muestra de diferentes órdenes de orientación para
Enlaces entre puntos: una misma cadena d

Si después de un punto es usada la orden L o

l, los puntos siguientes se unen con segmentos rectos.
Si después de indicar un punto aparece la orden H o V (para coordenadas absolutas) u h o v
(para coordenadas relativas), ambos puntos se unen con una línea horizontal o vertical
manteniendo fija la otra coordenada.

Si después de un punto es usada la orden Q o q, se genera una curva de Bézier cuadrática,

entre el primer punto y el último mediante un punto de control cuyas coordenadas aparecen
después de la orden.
T o t enlaza curvas de Bézier cuadráticas previamente trazadas, sucesivamente calculando
cada vez de manera automática un punto de control.
 Si después de un punto aparece la orden C o c, la terna de puntos siguientes genera una
curva de Bézier cúbica siendo los dos primeros, los puntos de control de ambos extremos de
la curva y el último es el punto final de la curva que se une con el primero. S o s enlaza curvas
cúbicas sucesivamente, calculándose de manera automática los puntos de control.

Si después de un punto aparece A o a, se unirán los puntos extremos, P y Q con una curva
elíptica o circular según los valores de los radios Rx y Ry respecto de los ejes de la elipse. El
valor de U y V cambia la dirección y parte visible que presentan respectivamente relativos a P
y Q, según sean 1 o 0. El valor de G es una rotación de los ejes de la elipse.

<path d="MPx,PxaRx,Ry G V U Qx,Qy" />

Para cerrar curvas y trayectorias, se cerrará la cadena de puntos con Z o z

independientemente si la orden está en mayúscula o no.

Aberturas:

Para generar una abertura en un recinto con interior(fill distinto de "none") se usa una cadena con orientación
contraria al borde del recinto (hay dos posibles órdenes: el horario y el antihorario), esto generará un recinto
cuyo interior tendrá una sola orientación, en caso contrario no hay abertura.

Texto

Se puede añadir texto, a partir de: un punto base x e y y se configuran las

características de la cadena de texto con los parámetros: font-family (tipo
de letra), font-size (tamaño de letras ) y estilo de letra por font-style (con
uno de cuatro valores posibles: normal, inherit, oblique o italic):

<text x="..." y="..." font-size="..." font-

style="..." > ... </text>

Agrupaciones
Muestra de Font-family (estado
Se pueden agrupar objetos para que compartan atributos por defecto y actual de Commons)
una disposición fija en el espacio para poder duplicarlos cómodamente:

<g ... >...</g>

Duplicados

Para duplicar objetos tanto internos como externos se tiene que incluir en la etiqueta <svg> el siguiente
fragmento:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" ... > ... </svg>

Duplicado de objetos svg

Se puede duplicar objetos identificados previamente con id="...", donde el espacio de puntos indica el
nombre.

<use xlink:href="#..."/>
Enlazado de imágenes

Se pueden añadir o incrustar enlaces a imágenes del tipo *.png, *.jpg o *.svg dentro de un rectángulo de
parámetros x, y, width y height:

<image xlink:href=" ... *.jpg" x="..." y="..." width="..."

height="..." />

Esta opción no es soportada por Wikimedia Commons.

Recortes

Se pueden recortar objetos mediante rellenos de otros objetos, por ejemplo, un círculo mediante un recinto
triangular. En el ejemplo que sigue, la orden clipPath con el parámetro "id" identifica el nombre del área a
recortar. La orden path siguiente con el parámetro clip-rule indica si un punto queda dentro del área de relleno
(nonzero) o fuera (evenodd, como en el caso presentado). Luego de cerrar la orden con </clipPath>, la orden
siguiente traza un círculo al cual se aplica el área recortada con el parámetro clip-path="url(#nombre del
área)".

<clipPath id="cortador">
<path fill="#0ff" d="m119,71l-103,60l120,0" clip-rule="evenodd"/>
</clipPath>
<circle r="80" cx="12" cy="130" stroke="#000" fill="#999" clip-path="url(#cortador)"/>

Transformaciones

Las transformaciones permiten efectuar semejanzas sobre imágenes mediante la matriz:

<g transform="matrix(a,b,c,d,e,f)"> ... </g>

Traslaciones.

<g transform="translate(e,f)"> ... </g>

Rotaciones.

<g transform="rotate(g)"> ... </g>

Simetrías.

<g transform="scale(1,-1),rotate(g)"> ... </g>

Homotecias.

<g transform="scale(k,k)"> ... </g>

Homotecias seguidas de simetrías.

 Homotecias seguidas de rotaciones.

Iteración de una Iteración de una Iteración de una Jugando con la

homotecia. homotecia seguida homotecia seguida alternancia de dos
de una simetría de una rotación transformaciones

Animaciones

Las animaciones se pueden crear incorporando programación con algún lenguaje que soporte el navegador,
como Python o JavaScript

Navegadores que soportan SVG

Mozilla Firefox: Implementa SVG en forma nativa desde su versión 1.5. Con el tiempo, fue
mejorando el cumplimiento del estándar, pero con alto consumo de tiempo de procesador. A
partir de la versión 3.5, en Firefox se ha modificado y mejorado el procesamiento de archivos
SVG.
Opera: Al igual que Firefox, también posee una implementación de SVG en forma nativa, pero
con poco consumo de tiempo de proceso. La versión 9.5 Beta, incorpora la posibilidad de
llamar en forma externa a una imagen en formato svg, usando la orden <image> o <use>.
Windows Internet Explorer: Aunque tardíamente, Microsoft empezó a dar soporte a este
estándar en el navegador Internet Explorer desde su novena versión.
Apple Safari: Su versión 3.1 (para computadores con sistema operativo Windows o Mac OS X)
posee implementación de soporte para archivos SVG tanto para imágenes como para texto
avanzado.
Google Chrome: Desde su primera versión, Google incorporó implementación de SVG de
forma nativa (ya que utiliza WebKit).
Microsoft Edge: Soporta el estándar SVG desde la primera versión incluida en la versión Build
10049 de Windows 10.

Software de edición
Actualmente hay muchos programas de diseño gráfico que lo soportan. Entre los que son software libre está
Inkscape. La Suite Ofimática libre LibreOffice, incorpora Draw, programa exclusivo para trabajar con SVG y
otros archivos gráficos vectoriales. También hay editores en línea que permiten abrir archivos o crearlos como
Method Draw, Vector Paint, Draw SVG o svgreal.6

Véase también
 VML
Web semántica
Lista de dialectos XML
PNG

Referencias
1. M Media Type registration for image/svg+xml (http://www.w3.org/TR/SVGMobile12/mimereg.ht
ml)
2. «Secret Origin of SVG» (http://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG).
World Wide Web Consortium. 21 de diciembre de 2007. Consultado el 13 de enero de 2014.
3. «SVG Tutorial» (https://www.w3schools.com/graphics/svg_intro.asp). www.w3schools.com.
Consultado el 7 de enero de 2021.
4. [1] (https://web.archive.org/web/20090831070549/http://www.croczilla.com/bits_and_pieces/sv
g/samples/svgtetris/svgtetris.svg)
5. «Scalable Vector Graphics (SVG) 1.1 (Second Edition)» (https://www.w3.org/TR/SVG11/REC-
SVG11-20110816.pdf) (en inglés). World Wide Web Consortium (W3C). 16 de agosto de 2016.
pp. 90-92. Consultado el 14 de noviembre de 2016.
6. [2] (https://code.google.com/p/svgreal/)

Enlaces externos
W3C Scalable Vector Graphics (SVG) (http://www.w3.org/Graphics/SVG) (en inglés)
Adobe SVG (https://web.archive.org/web/20061012050739/http://www.adobe.com/svg/) (en
inglés)
Mozilla SVG (http://www.mozilla.org/projects/svg/) y Ejemplos (https://web.archive.org/web/200
30210062036/http://www.croczilla.com/svg/) (en inglés)
Cartografía y planos SVG (https://web.archive.org/web/20030207141104/http://www.carto.net/p
rojects/) (en inglés)
Inkscape (http://www.inkscape.org/), editor libre de SVG
MDC Mozilla Developer Center SVG (http://developer.mozilla.org/es/docs/SVG)

Ejemplos y manuales
Tutorial de SVG (https://www.w3schools.com/graphics/svg_intro.asp)
SVG Tutorial by Altsoft (http://alt-soft.com/tutorial/svg_tutorial/introduction.html)
1º borrador del manual (1-9-2010) (http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.ht
ml)
2º borrador del manual (16-8-2011) (http://www.w3.org/TR/2011/REC-SVG11-20110816/)
Manual (14-8-2018) (https://svgwg.org/svg2-draft/)

Obtenido de «https://es.wikipedia.org/w/index.php?title=Gráficos_vectoriales_escalables&oldid=132892037»

Esta página se editó por última vez el 2 feb 2021 a las 14:12.

El texto está disponible bajo la Licencia Creative Commons Atribución Compartir Igual 3.0; pueden aplicarse cláusulas
adicionales. Al usar este sitio, usted acepta nuestros términos de uso y nuestra política de privacidad.
Wikipedia® es una marca registrada de la Fundación Wikimedia, Inc., una organización sin ánimo de lucro.