El format SVG serveix per crear gràfics vectorials i tot i que no és dels formats més coneguts té algunes característiques que el fan bastant interessant.

Com per exemple que al renderitzr les imatges a través d’un llenguatge permet escalar la imatge sense perdre qualitat i si la imatge és poc complexa, també fa que sigui no ocupi gaire espai en disc.

Una de les coses per les que ho volia utilitzar era per fer les imatges del post anterior (Fanzines)

El problema que m’he trobat és que no aconseguia que renderitzés bé el text, doncs no agafava bé la tipografia.

He estant cercant i fent diverses proves i just abans d’escriure aquest artícle, només havia aconseguit que es renderitzés correctament el text amb tipografia que jo volia si inseria el codi directament allà on volia que es mostrés de la pàgina.

Aquí els dos resultats que havia aconseguit, la primera inserint el codi directament a la pàgina i la segona inserint la imatge amb a través de l’etiqueta img:

Exemple de text Voldria escriure amb la tipografia GNUtypewriter

Com es pot veure només es mostra la tipografia correcte en el primer cas.

Curiosament en el segon resultat el text no és seleccionable, això és el que m’ha fet pensar que potser un svg no s’inseria així o si més no es podia inserir d’alguna altra manera.

Així que una última cerca m’ha portat a trobar una altra manera de com inserir un SVG i aquest si que renderitza correctament la tipografia:

El codi és el següent:

<object data="/assets/fitxer.svg" type="image/svg+xml">
  <img src="/assets/fitxer-nosvg.png" />
</object>

Així el tag que cal utilitzar és el de object, de forma opcional, si es vol mostrar una altra imatge pel cas en el que el navegador no obri SVG es pot afegir dins de object un tag img amb una imatge en un altre format.

Tot i així aquesta solució té detalls que estaria bé polir:

  • Si s’afegeix la imatge alternativa (fallback) si el navegador pot carregar l’svg, carregarà igualment l’altra imatge, pel que no serà del tot eficient.
  • Un altre problema que he trobat és que, com a mínim fins la versió 4.4.4 d’android el renderitzat tampóc no és correcte, el text queda desplaçat del lloc on hauria d’estar. A partir de la versió 5 ja queda resolt.
  • Per a que la imatge reaccioni segons els canvis de pantalla i sigui responsive caldrà fer algunes modificacions al codi.

Per a que agafés la tipografia s’ha hagut d’afegir aquest codi just després del tag svg:

   <style
      type="text/css"
      id="style3">
        @font-face {
            font-family: 'GNUtypewriter';
            src:
                local('GNUTypewriter'),
                url('/assets/gtw.otf');
            font-weight: normal;
            font-style: normal;
        }
 </style>