SVG redimensionable
Publicat el 09/09/2007
Introducció
Declarant un punt (x,y) d'un pla —d'un sistema de coordenades cartesianes— es determina la ubicació del punt (0,0) de l'element SVG. (Semblant a com es posiciona mitjançant position:absolute en CSS).
El punt (0,0) tant del pla com de qualsevol element —o agrupació d'elements— està ubicat a la cantonada superior esquerra (l'eix x va d'esquerra a dreta i l'eix y va de dalt a baix, sempre valors positius).
El "width" i el "height" d'un element SVG —el node arrel d'un SVG— determinaran la dimensió del pla (anomenat viewport) de tal manera que hi haurà correspondència directa entre la unitat i el pixel: x="1" és igual a x="1px".
Mitjançant l'atribut "viewBox" es pot modificar l'equivalència de la unitat amb els pixels al variar la relació entre els valors de "width" i "height" respecte els valors del "viewBox" corresponents.
Donat l'SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="460" height="120">
Es pot considerar igual a:
<svg xmlns="http://www.w3.org/2000/svg" width="460" height="120" viewBox="0 0 460 120">
Per obtenir una relació de 1u. = 2px es pot indicar amb:
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="240" viewBox="0 0 460 120">
I una relació de 1u. = 0.5px (per ser realistes 2u. = 1px ja que els pixels no poden ser fraccions):
<svg xmlns="http://www.w3.org/2000/svg" width="230" height="60" viewBox="0 0 460 120">
D'aquesta manera un SVG serà fàcil mostrar-lo al tamany desitjat fet que tot es redimensioni i posicioni en funció d'aquesta nova relació.
El problema
Aquest sistema entra en conflicte amb les funcions d'augment de tipografia del navegador —en aquest cas Firefox, Konqueror i Safari— ja que aquesta augmenta tot i estar definida en pixels.
Això produeix que els textos es solapin amb els altres elements SVG o que, al fer-se massa grans, se surtin del viewport fent que no es pugui llegir sencer.
A més a més, un SVG al ser vectorial permetria que l'augmentessis sense perdre definició.
Solució
La solució és donar un valor percentual als atributs "width" i "height" de manera que l'amplada i l'alçada quedi determinada pel node pare.
És a dir, cal fer:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 460 120">
i afegir al contenidor l'amplada i l'alçada que desitgem. En el cas d'un SVG en línia:
<div class="figuraSVG">
Amb un estil tal que:
.figuraSVG {
width: 27em;
height: 11em;
}
L'exemple sencer seria:
<div class="figuraSVG">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 460 120">
<g>
<rect width="450" height="150" style="fill: red;"/>
<path d="M1,10 L110,10 L110,30 L1,30 L1,10"/>
<path d="M1,105 L110,105 L110,45 L1,45 zM20,65 l70,0 l0,20 l-70,0z"/>
</g>
<text x="1" y="140"
style="font-family: sans-serif;font-size: 1.4em; fill: red; stroke: black;">
Logotip d'a.css
</text>
</svg>
</div>
Com que l'SVG tendirà a copar tot l'espai disponible i aquest és relatiu al tamany de lletra ja que s'usen 'em' el resultat serà el desitjat.
Si l'SVG és un objecte incrustat el node pare serà directament l'element OBJECT:
<object type="image/svg+xml" data="svg-zoom.svg" class="figuraSVG"></object>
L'exemple del cas funcionant i un cas pràctic: Arenoic. Actualment cal Firefox o Opera.
Comentaris