SVG – Lo que debes saber…
¿Cuál es la mejor manera de utilizar este formato?
La mejor forma de mostrar un archivo SVG, es quizás con la etiqueta ya que es soportado por la mayoría de los exploradores, además podemos agregar un mensaje para aquellos exploradores que no lo soporten.
Tu explorador no soporta el formato SVG
Ojo al type! Colocándolo de esta manera no tendremos problemas de compatibilidad con IE7.
¿Cómo utilizar svg como imagen de fondo?
Como si de otro formato se tratase. Lo único, hay que tener en cuenta es la compatibilidad con todos los navegadores. Utilizando el asterisco trabajamos de manera específica con IE7 y atacamos el problema, mostrando una imagen para que el espacio no quede vacío.
.svg-big {
background-image: url(polaroid.svg);
/* Para IE7 ponemos una imagen de otro formato */
*background-image: url(polaroid.gif);
}
Utilizando el asterisco trabajamos de manera específica con IE7 y atacamos el problema, mostrando una imagen para que el espacio no quede vacío.
¿Cuáles son sus principales ventajas?
- No pierde calidad si se hace zoom o si se redimensiona.
- Renderizado con antialiasing (contornos suaves y transparentes)
- El texto contenido dentro de SVG puede ser indexable por buscadores
- Ideal para ser impreso
- Posee características de accesibilidad para usuarios con discapacidades
- Pueden ser transformados por hojas de estilos
- Admite efectos como sonido, efectos visuales al hacer clic o mover el ratón, etiquetas informativas.
- Puede generarse dinámicamente en un servidor web como respuesta a instrucciones de Java, JavaScript, Perl o XML. Por ejemplo, pueden crearse al momento gráficos de excelente calidad con las cotizaciones de bolsa en tiempo real; un reloj analógico, con minutos y segundos, requiere sólo 2K de código.
¿Y las desventajas?
- La compresión de un SVG arroja siempre el mismo tamaño independientemente de la dimensión en el que se vaya a mostrar.
- El soporte de los navegadores:
-
Destacar que Internet Explorer no implementó el estándar hasta IE9 y Firefox desde la versión 32.0. Sin embargo Chrome, Safary y Opera lo aceptaron desde la primera versión y de manera nativa.
¿Cómo utilizarlo en exploradores que admitan SVG en línea?
Se puede utilizar el formato SVG en construcciones de HTML5 para navegadores que admitan SVG en forma nativa.
Una estructura tipo podría ser la siguiente:
<body>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″
width=”200px” height=”200px”>
<rect x=”0″ y=”0″ width=”100%” height=”100%”
fill=”none” stroke=”black”/>
<circle cx=”100″ cy=”100″ r=”50″
style=”stroke: black; fill: red;”/>
svg>
body>
Si nos detenemos un poquito más sus atributos vemos que:
- El atributo xmlns define el espacio de nombre para el fragmento SVG.
- El atributo version indica la versión del idioma de SVG
- Los atributos width y height definen el tamaño de la ventanilla de SVG
- El elemento SVG rect, relativo a la ventanilla SVG, dibuja un rectángulo negro desde la esquina superior derecha de la ventanilla, o en un punto (0, 0), que tiene el ancho y la altura máximos. Este posicionamiento delimita la ventanilla SVG determinada.
- De manera similar, el elemento SVG circle dibuja un círculo rojo con un borde negro de un radio de 50 píxeles. El círculo está centrado en el medio de la ventanilla SVG del píxel 200×200.
Por supuesto, a todas las formas podemos crearle comportamientos, del tipo onclick, onmouseover, onmouseout, etc.
Ejemplo:
<body>
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="redCircle" cx="100" cy="100" r="50"
style="stroke: black; fill: red;"
onmouseover="grow()" onmouseout="shrink()"/>
<rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: black;"/>
svg>
body>
Unos recursos…
He encontrado una herramienta muy curiosa que convierte nuestras imágenes con formatos jpg, gif, png a svg. Podéis probarla en el siguiente enlace http://picsvg.com/sp/
Para editar un SVG ya existente, crear uno nuevo y obtener su código, podemos ir directamente al SVG Editor.
Y para concluir, añado el link a una herramienta que no sé si ya conocéis: SVGeneration. Es realmente potente y permite configurar color, tamaño y otros parámetros de una colección de patrones disponibles para generar fondos en formato SVG. Lo único que hay que tener en cuenta es que, como ya hemos comentado, no funcionará en Explorer 8, Firefox 3.6, Safari 5, Opera 9 y versiones antiguas de los principales navegadores móviles.
