SVG – Lo que debes saber…
.svg-big {
background-image: url(polaroid.svg);
/* Para IE7 ponemos una imagen de otro formato */
*background-image: url(https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/polaroid.gif);
}
¿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.
- 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.
- 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.
<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…
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.