MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Afegir gràfics vectorials a la Web

This translation is incomplete. Please help translate this article from English.

Els gràfics vectorials són molt útils en moltes circumstàncies - tenen una grandària d'arxiu reduït i són altament escalables, de manera que no pixelen en acostar-ho o ampliar-se a una grandària gran. En aquest article et mostrarem com incloure un en la vostra pàgina web.

Requisits previs: Conèixer els conceptes bàsics d'HTML i com inserir una imatge en el document.
Objectiu: Aprendre com incrustar una imatge SVG (vector) en una pàgina web.

Nota: Aquest article no té la intenció d'ensenyar SVG; just el que és, i com afegir-lo a pàgines web.

Què són els gràfics vectorials?

A la web, treballarem amb dos tipus d'imatges - imatges de trama (raster) i imatges vectorials:

  • Les imatges de trama es defineixen utilitzant una quadrícula de píxels - un arxiu d'imatge de trama conté informació que mostra exactament on cada píxel es col·locat, i exactament de quin color ha de ser. Els formats populars de trama en la web inclouen mapa de bits (.bmp), PNG (.png), JPEG (.jpg) i GIF (.gif).
  • Les imatges vectorials es defineixen utilitzant algoritmes - un arxiu d'imatge vectorial que conté definicions de forma i el camí que l'ordinador pot utilitzar per esbrina quin aspecte ha de tenir la imatge quan es representi a la pantalla. El format SVG ens permet crear potents gràfics vectorials per a ús a la web.

Per donar-vos una idea de la diferència entre els dos, veurem un exemple. Podeu trobar aquest exemple en el nostre repositori Github com a vector-versus-raster.html - mostra dues imatges costat a costat aparentment idèntiques, una estrella vermella amb una ombra negre. La diferència és que el de l'esquerra és un PNG, i la dreta és una imatge SVG.

Two star images, one raster and one vector. At their default size they look identical

La diferència es fa evident quan s'amplia la pàgina: la imatge PNG es pixela a mesura que s'amplia, ja que conté informació sobre on ha d'estar cada píxel (i quin color); quan s'amplia, cada píxel augmenta de grandària per emplenar múltiples píxels en la pantalla, per la qual cosa la imatge comença a veure's bloquejada.La imatge vectorial, no obstant això, segueix lluint agradable i nítida, ja que no importa la grandària que sigui, els algorismes s'utilitzen per elaborar les formes en la imatge, amb els valors simplement s'escalen a mesura que es fa més gran

Two star images zoomed in. The raster one on the left starts to look pixellated, whereas the vector one still looks crisp.

D'altra banda, els arxius d'imatge vectorial són molt més lleugers que els seus equivalents trama, ja que només necessiten tenir un grapat d'algorismes, en lloc d'informació sobre cada píxel de la imatge individualment.

Què és SVG?

SVG és un llenguatge basat en XML per descriure imatges vectorials. Es bàsicament de marcat, com HTML, excepte que té molts elements diferents per a la definició de les formes que volem que apareguin a la imatge, i els efectes que volem aplicar a aquestes formes. SVG és per marcar els gràfics, no el contingut. Al final de l'espectre més simple, tenim elements per a la creació de formes simples, com <circle> i <rect>. Més característiques avançades de SVG inclouen <feColorMatrix> (transforma colors utilitzant una matriu de transformació,) <animate> (animar parts d'un gràfic vectorial,) i <mask> (aplicar una màscara sobre la part superior de la imatge.)

Com a simple exemple, el codi següent crea un cercle i un rectang

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

Això crea el següent resultat:

L'exemple anterior, donava la impressió que SVG és fàcil de codifca manualment. Sí, es pot codifca manualment un simple SVG en un editor de text, però per una imatge complexa comença ràpidament a ser molt difícil. Per a la creació d'imatges SVG, la majoria de la gent utilitza un editor de gràfics vectorials com Inkscape o Illustrator. Aquests paquets permeten crear una varietat d'il·lustracions utilitzant diverses eines de gràfics, i crear aproximacions de fotos (per exemple, funció Traçar mapa de bits de l'Inkscape).

SVG té algunes avantatges addicionals a més de les descrites fins al moment:

  • El text en imatges vectorials roman accessible (la qual cosa també beneficia la seva SEO).
  • Els SVGs es presten bé a estils/scripts, ja que cada component de la imatge és un element que pot ser dissenyat via CSS o per scripts via JavaScript.

Llavors, per què algú vol utilitzar gràfics de trama sobre SVG? Bé, SVG té alguns desavantatges:

  • SVG es pot complicar molt ràpidament, el que significa que les mides d'arxius poden créixer; els SVGs complexos poden arribar a ralentir els temps de processament del navegador
  • EL SVG pot ser més difícil de crear que les imatges de trama, depenent de quin tipus d'imatge estem tractant de crear.
  • SVG no és compatible amb els navegadors més antics, pel que pot no ser adequat si cal donar suport a les versions antigues d'Internet Explorer amb el vostre lloc web (SVG començar a ser suportat a partir d'IE9).

Els gràfics de trama són sens dubte millor per a les imatges de precisió complexes, com ara fotos, per les raons descrites anteriorment.

Nota: En Inkscape, guardar els arxius com Plain SVG per estalviar espai. També, si us plau referiu-vos a aquest article que descriu com preparar SVGs per a la Web.

Afegir SVG a les vostres pàgines

En aquesta secció veurem les diferents formes en què es poden afegir gràfics vectorials SVG a les vostres pàgines web.

La forma més ràpida : <img>

Per incrustar un SVG mitjançant un element <img>, només s'ha de fer referència a ell en l'atribut src, com es podria esperar. Necessitarem un atribut height o width (o tots dos si el SVG no té cap relació d'aspecte inherent). Si no ho heu fet ja, si us plau llegiu les imatges en HTML.

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

Pros

  • Sintaxi de la imatge ràpida i familiar amb equivalent de text incorporat en l'atribut alt.
  • Es pot convertir la imatge en un hipervínculo fàcilment niant el <img> dins d'un element <a>.

Contres

  • No es pot manipular la imatge amb JavaScript.
  • Si es vol controlar el contingut SVG amb CSS, s'ha d'incloure els estils CSS en línia en el codi SVG. (Les fulles d'estil externes invocades des de l'arxiu SVG no tenen cap efecte).
  • No es pot canviar l'estil de la imatge amb pseudoclasses CSS (like :focus).

Solució de problemes i compatibilitat entre navegadors

Per donar suport als navegadors SVG que no suporten SVG (IE 8 i per sota, Android 2.3 i per sota), es pot fer referència a un PNG o JPG des de l'atribut src i utilitzar un atribut srcset (que només reconeixen els navegadors recents) per fer referència al SVG. Sent aquest el cas, només els navegadors compatibles carregaran el SVG - els navegadors més antics carregaran el PNG en lloc d'un altre:

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

També es pot utilitzar el SVGs com imatges de fons de CSS, com es mostra a continuació. En el codi següent, els navegadors antics es pegaran amb el PNG que entenen, mentre que els nous navegadors carregaran el SVG:

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

Igual que el mètode <img> descrit anteriorment, la inserció d'SVGs utilitzant imatges de fons CSS vol dir que el SVG no pot ser manipulat amb JavaScript, i també està subjecta a les mateixes limitacions de CSS.

Si els SVGs no es mostren en absolut, pot ser que el servidor no estigui configurat correctament. Si aquest és el problema, aquest article us orientarà en la direcció correcta.

Com incloure el codi SVG dins del vostre HTML

També es pot obrir el fitxer SVG en un editor de text, copiar el codi SVG, i enganxar-lo en el vostre document HTML - això de vegades es diu posar en  línia SVG, o inlining SVG. Assegureu-vos que el fragment de codi SVG comença i acaba amb les etiquetes <svg></svg> (no incloure res fora d'aquestes). Aquí hi ha un exemple molt simple del que es pot enganxar en el vostre document:

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

Pros

  • Posar SVG en línia estalvia una petició HTTP, i per tant pot reduir el temps de càrrega.
  • Es pot assignar classes i ids els elements SVG i l'estil d'ells amb CSS, ja sigui dins el SVG o on poseu les regles d'estil CSS per al document HTML. De fet, es pot utilitzar qualsevol atribut de presentació SVG com una propietat CSS.
  • Inlining SVG és l'únic enfocament que permet utilitzar les interaccions (com :focus) i animacions CSS en la imatge SVG (Fins i tot en la fulla d'estil regular)
  • Es pot convertir el marcat SVG en un hipervincle embolicant-lo en un element <a>.

Contres

  • Aquest mètode només és adequat si s'utilitza el SVG en un sol lloc. La duplicació es fa per el manteniment intensiu de recursos.
  • El codi extra SVG augmenta la mida del arxiu HTML.
  • El navegador no pot emmagatzemar en memòria cau SVG en línia, ja que seria emmagatzemar en memòria cau els recursos d'imatges regulars.
  • Es pot incloure el respatller en un element <foreignObject>, però els navegadors compatibles amb SVG segueixen descarregant les imatges de respatller. Cal sospesar si la sobrecàrrega addicional realment val la pena, només per donar suport als navegadors obsolets.

Com incrustar un SVG amb un <iframe>

Es poden obrir imatges SVG en el navegador de la mateixa manera que les pàgines web. Així que la incrustació d'un document SVG amb un <iframe> es fa de la mateixa manera que l'estudiat en Des de <object> a <iframe> - altres tecnologies d'incrustació.

Aquí teniu una ullada ràpida:

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

Això en definitiva no és el millor mètode per triar:

Contres

  • Els iframes tenen un mecanisme de reserva, com es pot veure, però els navegadors només mostraran la reserva si manquen de suport complet per iframes.
  • D'altra banda, llevat que el SVG i la pàgina web actual tenen el mateix origen, no es pot utilitzar el Javascript a la pàgina web principal per manipular el SVG.

Aprenentatge actiu: Jugar amb SVG

En aquesta secció d'aprenentatge actiu ens agradaria que simplement juguéssiu amb una mica de SVG per diversió. A la secció d'entrada de sota veureu que us hem proporcionat algunes mostres perquè pugueu començar. També podeu anar a SVG Element Reference, per conèixer més detalls sobre altres joguines que es poden utilitzar en SVG, i provar-les també. Aquesta secció és, sobre tot, la pràctica de les vostres habilitats d'investigació, i que té una mica de diversió.

Si us quedeu encallats i no podeu aconseguir que funcioni el vostre codi, sempre el podeu restablir amb el botó Reset.

Sumari

En aquest article se us ha proporcionat un viatge ràpid del que són gràfics vectorials i SVG, perquè són útils conèixer-los, i com s'inclouen els SVG dins de les pàgines web. Mai hem tingut la intenció de que fos una guia completa per a l'aprenentatge SVG, només un punter perquè conegueu que és SVG, per si us els trobeu en el vostres viatjes al voltant de la web. Així que no us preocupeu si no us sentiu, encara, com uns experts en SVG. Hem inclòs alguns enllaços, més a baix, que us podria ajudar-vos si voleu anar i esbrinar més sobre com funciona.

En l'últim article d'aquest mòdul explorarem les imatges sensibles en detall, mirant les eines que té HTML, que us permetin fer que les vostres imatges funcionin millor a través de diferents dispositius.

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,