{"id":707,"date":"2018-01-30T08:48:32","date_gmt":"2018-01-30T08:48:32","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=707"},"modified":"2018-01-30T08:48:32","modified_gmt":"2018-01-30T08:48:32","slug":"4-3-8-svg","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/4-3-8-svg\/","title":{"rendered":"4.3.8. SVG"},"content":{"rendered":"<p>Hasta ahora, todos los formatos que hemos comentado son ejemplos de im\u00e1genes con mapa de bits, es decir, parrillas de p\u00edxeles.<\/p>\n<div class=\"featured featured-blue\"><p>Como explicamos anteriormente, un gr\u00e1fico vectorial codifica una imagen como una composici\u00f3n de distintas formas geom\u00e9tricas.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Esto tiene una serie de ventajas interesantes:<\/p>\n<ul>\n<li>Cuando trabajamos con estructuras simples, como logotipos o diagramas, un <a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"SVG, siglas de <em>scalable vector graphics<\/em>, o gr\u00e1ficos vectoriales redimensionables, es el formato m\u00e1s usado de gr\u00e1fico vectorial.\" data-placement=\"top\" data-html=\"true\" ><strong>SVG<\/strong><\/a> pesa mucho menos que cualquier imagen con mapa de bits.<\/li>\n<li>Cuando hacemos un <em>zoom<\/em>, en lugar de ver la imagen cada vez m\u00e1s distorsionada, continuamos viendo el mismo tipo de curvas y formas geom\u00e9tricas que ve\u00edamos en la resoluci\u00f3n original.<\/li>\n<\/ul>\n<p>Otro aspecto en el que los SVG difieren radicalmente de los gr\u00e1ficos de mapa de bits es que formalmente son documentos XML, es decir, una descripci\u00f3n en c\u00f3digo de la imagen, que puede modificarse con un editor de texto o con programaci\u00f3n, y as\u00ed se puede jugar modificando los par\u00e1metros, animar un gr\u00e1fico en una p\u00e1gina web con 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 imagen superior es el resultado de ampliar un SVG con el logotipo de la UOC, y las letras se ven igual de n\u00edtidas. La imagen inferior es el resultado de ampliar un JPG.<br \/>Fuente: David Casacuberta a partir de una imagen propiedad<br \/>de la UOC.<\/figcaption><\/figure>\n<h4><strong>\u00bfCu\u00e1ndo hay que usar SVG?<\/strong><\/h4>\n<p>En logotipos o diagramas que queremos que se vean igual de bien en diferentes tama\u00f1os y resoluciones, como un monitor de alta resoluci\u00f3n o las pantallas retina de Apple. Tambi\u00e9n en diagramas complejos que se exploren mediante <em>zooms<\/em>, como mapas conceptuales.<\/p>\n<p>El hecho de que sean mucho m\u00e1s peque\u00f1os que cualquier imagen de mapa de bits no significa que sea una buena idea convertir una fotograf\u00eda en alta resoluci\u00f3n a SVG para poderla subir a una p\u00e1gina web. Dado que no registramos p\u00edxeles, sino figuras geom\u00e9tricas, la fotograf\u00eda que introducimos en el sistema quedar\u00e1 fatalmente distorsionada, perder\u00e1 color, parecer\u00e1 un dibujo y, en realidad, al ser necesarias una gran cantidad de figuras geom\u00e9tricas para acercarse al aspecto de una foto real, una imagen as\u00ed en SVG tardar\u00eda mucho en cargarse, puesto que implicar\u00eda una gran cantidad de operaciones matem\u00e1ticas por parte del procesador.<\/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 imagen de la derecha muestra c\u00f3mo queda nuestro plato de sashimi al intentar convertirlo a SVG con un convertidor en l\u00ednea.<br \/>Fuente: David Casacuberta<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Hasta ahora, todos los formatos que hemos comentado son ejemplos de im\u00e1genes con mapa de bits, es decir, parrillas de p\u00edxeles. &nbsp; Esto tiene una serie de ventajas interesantes: Cuando trabajamos con estructuras simples, como logotipos o diagramas, un pesa mucho menos que cualquier imagen con mapa de bits. Cuando hacemos un zoom, en lugar [&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\/es\/wp-json\/wp\/v2\/pages\/707"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":1,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/707\/revisions"}],"predecessor-version":[{"id":708,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/707\/revisions\/708"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/media?parent=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}