Bots de conversa de Telegram amb Google Apps Script

Format dels gràfics vectorials

Els gràfics vectorials SVG (Scalable Vector Graphics) són gràfics que en lloc de guardar els píxels de la imatge (com, més o menys, fan GIF, PNG, JPEG o TIFF) guarden la informació a partir de les formes que composen aquests gràfics. Aquesta inxormació es guarda en fitxers de text en format XML i, per tant, es pot editar. A més, el fet de treballar en forma vectorial permet que la imatge es pugui canviar d'escala sense pèrdua de qualitat.

Hi ha moltes comandes per generar gràfics vectorials i és difícil dominar-les totes. A més, cada comanda pot tenir moltíssims paràmetres però, per sort, molts dels paràmetres no cal posar-los si no els fem servir. Nosaltres seleccionarem les comandes que ens facin falta i, per a cada una, ens crearem una funció que la generi a partir dels paràmetres que pensem fer servir. Si necessiteu informació sobre alguna comanda concreta, la podeu trobar (entre moltes altres opcions) al web de w3schools.

Per a aplicacions senzilles sol ser més pràctic crear un petit gràfic SVG amb un editor i després veure com podem personalitzar els paràmetres per aconseguir el que ens cal i, a partir d'aquí, crear-nos una funció que generi la comanda a partir dels paràmetres. Hi ha diversos editors de gràfics vectorials, tant en versió web com per instal·lar a l'ordinador. Nosaltres hem fet servir el de Clker i el de Method.

Anem a veure com ho faríem. Primer obrim el programa i dibuixem l'element amb el que volem treballar, per exemple, un rectangle. Normalment és millor dibuixar-ne dos o més i donar-los propietats (mides, color, etc.) diferents, per poder veure quins són els paràmetres. El nostre dibuix podria ser, per exemple, aquest:

Si piquem el botó que tenim representat a continuació podrem veure les comandes SVG que corresponen al nostre dibuix.

En el requadre que se'ns obre podem trobar les comandes SVG i copiar-les per portar-les a altres llocs. També hi podem enganxar les nostres comandes SVG, opció que és molt útil per provar si les comandes que generem amb els nostres scripts generen els dibuixos que preveiem.

Si ens cal, podem fer sortir una quadrícula per poder comparar les coordenades dels paràmetres amb el que veiem a la pantalla. Podem activar la quadrícula amb aquest botó:

Si mirem les comandes SVG del nostre dibuix, obtindrem el següent:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" >
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" x="133" y="197" width="50" height="180" stroke-width="0" stroke="null" fill="#0000FF"
    stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"/>
  <rect stroke="#007f00" id="svg_2" x="295" y="196.50001" width="126" height="132.99999" stroke-width="3"
    fill="#ff0000" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"/>
 </g>
</svg>

Les comandes XML, com les que es fan servir als SVG, poden ser de dos tipus. Les que contenen dades en el seu interior tenen una etiqueta d'inici i una de tancament, en canvi les que no contenen informació al seu interior no tenen etiqueta de tancament. Els paràmetres, si n'hi ha, es posen a l'etiqueta d'inici. A la taula següent comentem les etiquetes que surten en el nostre dibuix.

A l'etiqueta <svg> s'hi ha d'indicar les normes en les que està basat el nostre gràfic. En el nostre cas hi hem posat les que fan falta per a tots els tipus de gràfic que farem servir però si afegim noves etiquetes pot ser necessari afegir-ne alguna més.

Els paràmetres d'una comanda tenen un format del tipus paràmetre="valor". Hi ha dues etiquetes del nostre dibuix que tenen paràmetres. Anem a comentar els que farem servir. Primer l'etiqueta svg:

Aquesta és la funció que ens generarà les etiquetes svg, g i title:

function cap(ample, alt, titol){
  var resp = '<svg width="' + ample + '" height="' + alt;
  resp = resp + '" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"';
  resp = resp + ' xmlns:xlink="http://www.w3.org/1999/xlink">' + '\n';
  resp = resp + '<g>' + '\n' + '<title>' + titol + '</title>';
  return resp;
}

I ara els de l'etiqueta rect:

Aquesta és la funció que ens generarà l'etiqueta rect:

function rect(x, y, ample, alt, gruix, color, vora, ident){
  var resp = '<rect id="' + ident + '" x="' + x + '" y="' + y + '" width="' + ample + '" height="' + alt;
  resp = resp + '" stroke-width="' + gruix + '" stroke="' + vora + '" fill="' + color;
  resp = resp + '" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"/>';
  return resp;
}

Per acabar, aquesta és la funció que ens generarà les etiquetes de tancament al final del dibuix:

function peu(){
  var resp = '</g>' + '\n' + '</svg>';
  return resp;
}

En aquesta pàgina hi trobareu aquestes funcions i altres que hem fet servir en els exemples. Un cop tinguem definides les comandes del nostre gràfic, hi ha diferents maneres de mostrar-lo a l'usuari que comentem en aquesta pàgina. Cal tenir present que moltes d'elles només serveixen en alguns casos concrets.

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.