19/1/2019 Gráficos vectoriales escalables - Wikipedia, la enciclopedia libre

Gráficos vectoriales escalables

Gráficos vectoriales escalables, o Gráficos vectoriales
redimensionables (del inglés Scalable Vector Graphics) o SVG
Gráficos vectoriales escalables
es un formato de gráficos vectoriales bidimensionales, tanto
estáticos como animados, en formato XML, cuya especificación
es un estándar abierto desarrollado por el W3C desde el año
1999.

SVG se convirtió en una recomendación del W3C en septiembre

de 2001, por lo que ya ha sido incluido de forma nativa en el
navegador web del W3C Amaya. Las versiones 1.5 y posteriores
de Mozilla Firefox soportan gráficos hechos con SVG, así como
el navegador Opera que desde su versión 8 ha implementado
SVG 1.1 Tiny en su núcleo. Navegadores como Google Chrome,
Safari e Internet Explorer 9 también son capaces de mostrar
imágenes en formato SVG sin necesidad de complementos
externos. Otros navegadores web, como versiones anteriores a
Desarrollador
la 9 de Internet Explorer, necesitan un conector o plug-in.
World Wide Web Consortium
w3.org/Graphics/SVG/ (http://www.w3.org/Graph
ics/SVG/)
Índice Información general
Orígenes Extensión de .svg, .svgz
Vista general archivo
Elementos geométricos Tipo de MIME image/svg+xml1
Atributos
Líneas Uniform Type public.svg-image
Rectángulos Identifier
Círculo Lanzamiento 4 de septiembre de 2001
Elipse inicial
Mixtilínea Última versión 1.1 (segunda edición)
Texto
16 de agosto de 2011 (7 años, 5
Agrupaciones
meses y 1 día)
Duplicados
Duplicado de objetos svg Tipo de formato Gráfico vectorial
Enlazado de imágenes Extendido de XML
Recortes Formato abierto
Transformaciones
[editar datos en Wikidata]
Navegadores que soportan SVG
Software de edición
Véase también
Referencias
Enlaces externos
Ejemplos y manuales

https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables 1/8
19/1/2019 Gráficos vectoriales escalables - Wikipedia, la enciclopedia libre

Orígenes
En 1996, Chris Liley redactó para el W3C un documento con directrices sobre los posibles
requerimientos para integrar un formato estándar de archivo para describir elementos Imagen estática
gráficos vectoriales. Para 1998 varias empresas habían turnado propuestas a este generada desde un
organismo, de las cuales dos principalmente sirvieron como base para los borradores que ejemplo SVG. El fichero
constituirían el SVG: el VML desarrollado por Microsoft para su formato de documentos original requiere un
navegador con soporte
RTF y el PGML desarrollado entonces por Adobe en coordinación con IBM, Netscape y
nativo o mediante
SUN. Tras la publicación del estándar SVG, Microsoft disoció el VML arguyendo que era
plugin.
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

Vista general
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 La imagen ilustra una diferencia entre mapas de
bits e imágenes vectoriales. La imagen vectorial
conjunto de características incluye las transformaciones
puede ser redimensionada, tanto como se
anidadas, las trayectorias de recorte, las máscaras alfa, los filtros
requiera, sin pérdida de calidad de imagen. Esto
de efectos, las plantillas de objetos y la extensibilidad. no es así con un mapa de bits.

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, disponible aquí (https://web.archive.org/web/2009083107
0549/http://www.croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg).

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.

https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables 2/8
19/1/2019 Gráficos vectoriales escalables - Wikipedia, la enciclopedia libre

Complejidad

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

Elementos geométricos
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 ventana posee
Tomate en SVG.
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: Orientación corregida usada
habitualmente para representación
Nominalmente: red, yellow, blue, aqua, salmon, tomato, orange, gráfica
lightgreen, etc.3
Con valores hexadecimales: #ff0000, #ffff00, etc.
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.

https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables 3/8
19/1/2019 Gráficos vectoriales escalables - Wikipedia, la enciclopedia libre

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 ... " />

Enlaces entre puntos:

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.
https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables 4/8
19/1/2019 Gráficos vectoriales escalables - Wikipedia, la enciclopedia libre

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 Muestra de diferentes órdenes de orientación
puntos de control. para una misma cadena d.

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
Muestreo de Font-family(estado
Se pueden agrupar objetos para que compartan atributos por defecto y una
actual de commons).
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>

https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables 5/8
19/1/2019 Gráficos vectoriales escalables - Wikipedia, la enciclopedia libre

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.

https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables 6/8
19/1/2019 Gráficos vectoriales escalables - Wikipedia, la enciclopedia libre

Homotecias seguidas de rotaciones.

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

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

Navegadores que soportan SVG

Mozilla Firefox: Implementa SVG en forma nativa desde su versión 1.5. A través del 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 el más popular es
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.4

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

https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables 7/8
19/1/2019 Gráficos vectoriales escalables - Wikipedia, la enciclopedia libre

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. «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.
4. http://code.google.com/p/svgreal/

Enlaces externos
SCALABLE, un libro sobre SVG (https://leanpub.com/scalable/) (en español)
SVG en Sublime Text (http://jorgeatgu.com/blog/svg-en-sublime-text/) (en español)
LibreOffice Draw (https://es.libreoffice.org/) Editor de vectores Libre en SVG y otros formatos vectoriales
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/20030210062036/http://w
ww.croczilla.com/svg/) (en inglés)
Cartografía y planos SVG (https://web.archive.org/web/20030207141104/http://www.carto.net/projects/) (en inglés)
Inkscape (http://www.inkscape.org/), editor libre de SVG
SVG-edit (https://framavectoriel.org/svg-editor.html) editor en línea de SVG
Editor SVG Sketsa (https://web.archive.org/web/20060409042149/http://www.kiyut.com/products/sketsa/index.html),
comercial (en inglés)
MDC Mozilla Developer Center SVG (http://developer.mozilla.org/es/docs/SVG)
Aplicación Móvil que Implementa un Catálogo de Circuitos Integrados Reduciendo Requerimientos de Memoria
usando SVG (https://www.dspace.espol.edu.ec/bitstream/123456789/4751/1/7338.pdf)
Tutorial SVG para HTML5 (http://w3.unpocodetodo.info/svg/introduccion.php) (en español )
Guía Práctica de SVG en la web (https://www.maismedia.com/blog/tutoriales/guia-practica-svg-web) (en español
)

Ejemplos y manuales
Página elecciones suiza usando SVG (http://tagesschau.sf.tv/microgis/map/nr)
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.html)
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=112111831»

Esta página se editó por última vez el 19 nov 2018 a las 01:31.

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.

https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables 8/8