Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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 gráficos vectoriales. Para 1998 varias
empresas habían turnado propuestas a este organismo, de las cuales dos principalmente sirvieron como base
para los borradores que constituirían el SVG: el VML desarrollado 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 SVG
Para poder entender un poco SVG desde el código se debe tener un conocimiento básico de HTML y
XML.
viewBox.
xmlns.
3 <style>
5 </style>
7 </svg>
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
<g transform="translate(50,150)">
<g transform="scale(1,-1)">
...
</g>
</g>
</svg>
Atributos
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 los parámetros height y width:
Círculo
El objeto círculo consta de un punto cuyo centro tiene las coordenadas (cx, cy), y su radio es r:
Elipse
El objeto elipse consta de un punto cuyo centro tiene las coordenadas (cx, cy), un radio horizontal, rx, y un
radio vertical, ry:
Mixtilínea
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.
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
Duplicados
Para duplicar objetos tanto internos como externos se tiene que incluir en la etiqueta <svg> el siguiente
fragmento:
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:
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">
</clipPath>
Transformaciones
Traslaciones.
Rotaciones.
Simetrías.
Homotecias.
<g transform="scale(k,k)"> ... </g>
Animaciones
Las animaciones se pueden crear incorporando programación con algún lenguaje que soporte el navegador,
como Python o JavaScript
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 y 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.
html)
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/
svg/samples/svgtetris/svgtetris.svg)
5. «Scalable Vector Graphics (SVG) 1.1 (Second Edition)» (https://www.w3.org/TR/SVG11/RE
C-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/2
0030210062036/http://www.croczilla.com/svg/) (en inglés)
Cartografía y planos SVG (https://web.archive.org/web/20030207141104/http://www.carto.ne
t/projects/) (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)
Esta página se editó por última vez el 2 ago 2022 a las 19:54.
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.