{"id":231,"date":"2018-01-19T11:47:44","date_gmt":"2018-01-19T11:47:44","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=231"},"modified":"2018-01-30T13:49:58","modified_gmt":"2018-01-30T13:49:58","slug":"4-3-8-svg","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/4-3-8-svg\/","title":{"rendered":"4.3.8. SVG"},"content":{"rendered":"<p>Fins ara, tots els formats que hem comentat s\u00f3n exemples d\u2019imatges amb mapa de bits, \u00e9s a dir, graelles de p\u00edxels.<\/p>\n<div class=\"featured featured-blue\"><p>Com vam explicar anteriorment, un gr\u00e0fic vectorial codifica una imatge com una composici\u00f3 de diverses formes geom\u00e8triques.<\/p>\n<\/div>\n<p>Aix\u00f2 t\u00e9 una s\u00e8rie d\u2019avantatges interessants:<\/p>\n<ul>\n<li>Quan treballem amb estructures simples, com a logotips o diagrames, un <a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"SVG, sigles de <em>Scalable Vector Graphics<\/em>, o gr\u00e0fics vectorials redimensionables, \u00e9s el format m\u00e9s usat de gr\u00e0fic vectorial.\" data-placement=\"top\" data-html=\"true\" ><strong>SVG<\/strong><\/a>\u00a0pesa molt menys que qualsevol imatge amb mapa de bits.<\/li>\n<li>Quan fem un <em>zoom<\/em>, en lloc de veure la imatge cada vegada m\u00e9s distorsionada continuem veient el mateix tipus de corbes i formes geom\u00e8triques que v\u00e8iem en la resoluci\u00f3 original.<\/li>\n<\/ul>\n<p>Un altre aspecte en qu\u00e8 els SVG difereixen radicalment dels gr\u00e0fics de mapa de bits \u00e9s que formalment s\u00f3n documents XML, \u00e9s a dir, una descripci\u00f3 en codi de la imatge, que pot modificar-se amb un editor de text o amb programaci\u00f3, i aix\u00ed es pot jugar modificant els par\u00e0metres, animar un gr\u00e0fic en una p\u00e0gina web amb JavaScript, etc.<\/p>\n<figure id=\"attachment_38\" aria-describedby=\"caption-attachment-38\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"alignnone wp-image-38 size-full\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_019.jpg\" alt=\"SVG \" width=\"300\" height=\"306\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_019.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_019-294x300.jpg 294w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-38\" class=\"wp-caption-text\"><strong>Figura 19.<\/strong> La imatge superior \u00e9s el resultat d&#8217;ampliar un SVG amb el logotip de la UOC, i les lletres es veuen igual de n\u00edtides. La imatge inferior \u00e9s el resultat d&#8217;ampliar un JPG.<br \/>Font: David Casacuberta a partir d&#8217;una imatge propietat de UOC<\/figcaption><\/figure>\n<h4><strong>Quan cal usar SVG?<\/strong><\/h4>\n<p>En logotips o diagrames que volem que es vegin igual de b\u00e9 en diferents grand\u00e0ries i diferents resolucions, com un monitor d\u2019alta resoluci\u00f3 o les pantalles retina d\u2019Apple. Tamb\u00e9 en diagrames complexos que s\u2019explorin mitjan\u00e7ant <em>zooms<\/em>, com mapes conceptuals.<\/p>\n<p>El fet que siguin molt m\u00e9s petits que qualsevol imatge de mapa de bits no significa que sigui una bona idea convertir una fotografia en alta resoluci\u00f3 a SVG per a poder-la pujar a una p\u00e0gina web. Com que no registrem p\u00edxels sin\u00f3 figures geom\u00e8triques, la fotografia que introdu\u00efm en el sistema quedar\u00e0 fatalment distorsionada, perdr\u00e0 color, semblar\u00e0 un dibuix i, en realitat, en ser necess\u00e0ries una gran quantitat de figures geom\u00e8triques per a apropar-se a l\u2019aspecte d\u2019una foto real, una imatge aix\u00ed en SVG trigaria molt a carregar-se, ja que implicaria una gran quantitat d\u2019operacions matem\u00e0tiques per part del processador.<\/p>\n<figure id=\"attachment_39\" aria-describedby=\"caption-attachment-39\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-39\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_020.jpg\" alt=\"plat de sashimi en intentar convertir-lo a SVG \" width=\"800\" height=\"234\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_020.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_020-300x88.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-content\/uploads\/sites\/6\/2018\/01\/20015_020-768x225.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-39\" class=\"wp-caption-text\"><strong>Figura 20.<\/strong> La imatge de la dreta mostra com queda el nostre plat de sashimi en intentar convertir-lo a SVG amb un convertidor en l\u00ednia.<br \/>Font: David Casacuberta<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Fins ara, tots els formats que hem comentat s\u00f3n exemples d\u2019imatges amb mapa de bits, \u00e9s a dir, graelles de p\u00edxels. Aix\u00f2 t\u00e9 una s\u00e8rie d\u2019avantatges interessants: Quan treballem amb estructures simples, com a logotips o diagrames, un \u00a0pesa molt menys que qualsevol imatge amb mapa de bits. Quan fem un zoom, en lloc de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/231"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":4,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/231\/revisions"}],"predecessor-version":[{"id":903,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/231\/revisions\/903"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/media?parent=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}