{"id":1246,"date":"2014-12-15T11:48:58","date_gmt":"2014-12-15T11:48:58","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/?p=1246"},"modified":"2017-12-28T11:51:23","modified_gmt":"2017-12-28T11:51:23","slug":"optimitzar-svg-en-illustrator","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/introduccio\/optimitzar-svg-en-illustrator\/","title":{"rendered":"Optimitzar SVG en Illustrator"},"content":{"rendered":"<p>Els arxius del tipus SVG poden ser incrustats en una p\u00e0gina web, en el codi HTML, per tant <strong>\u00e9s important que<\/strong><strong> optimitzem l&#8217;arxiu i que siguem organitzats<\/strong> amb l&#8217;arxiu des Illustrator perqu\u00e8 en exportar no hagi codi innecessari.<\/p>\n<ul>\n<li><strong>Agrupa<\/strong><strong> elements<\/strong> en Illustrator nom\u00e9s si aix\u00f2 implica algun \u00fas pr\u00e0ctic en l&#8217;HTML, el codi SVG afegeix una etiqueta &lt;g&gt; als elements agrupats.<\/li>\n<li><strong>Anomena<\/strong><strong> les capes i els elements<\/strong> en l&#8217;arxiu de illustrator per poder identificar cada element despr\u00e9s des del HTML.<\/li>\n<li><strong>Evita<\/strong><strong> utilitzar efectes que necessitin d&#8217;un proc\u00e9s de rasteritzaci\u00f3<\/strong>, ja que es perdria el sentit d&#8217;utilitzar aquest format. Despr\u00e9s pots afegir efectes SVG als gr\u00e0fics directament a l&#8217;HTML (o al mateix Illustrator en Effect&gt; SVG Filters) evitant aix\u00ed que els elements es rasteritzin.<\/li>\n<li><strong>Utilitza<\/strong><strong> s\u00edmbols <\/strong>per elements repetitius dins la infografia<\/li>\n<li><strong>Evita<\/strong><strong> utilitzar pinzells art\u00edstics o vectors molt complexos<\/strong>.<\/li>\n<li><strong>Optimitza la teva il\u00b7lustraci\u00f3<\/strong><strong> reduint el nombre de vectors. <\/strong>Un tra\u00e7at complex amb molts punts es tradueix en un arxiu svg m\u00e9s pesat. Per reduir de manera senzilla els vectors podem utilitzar <strong>l&#8217;eina<\/strong><strong> warp<\/strong> de manera manual en les \u00e0rees que vulguem i m\u00e9s controlat o simplificar mitjan\u00e7ant <strong>Objecte<\/strong><strong>&gt; tra\u00e7at&gt; simplificar<\/strong> d&#8217;una manera m\u00e9s general, o b\u00e9 una combinaci\u00f3 de tots dos.<\/li>\n<\/ul>\n<p>Us deixo a m\u00e9s aquests enlla\u00e7os que us poden ajudar a entendre alguns <strong>conceptes<\/strong><strong> b\u00e0sics sobre l&#8217;\u00fas i optimitzaci\u00f3 de svg a la web<\/strong>:<\/p>\n<p><a href=\"https:\/\/escss.blogspot.com\/2014\/04\/SVG-guia-inicio-uso-creacion.html\">https:\/\/escss.blogspot.com\/2014\/04\/SVG-guia-inicio-uso-creacion.html<\/a><\/p>\n<p><a href=\"http:\/\/helpx.adobe.com\/es\/illustrator\/using\/svg.html\">http:\/\/helpx.adobe.com\/es\/illustrator\/using\/svg.html<\/a><\/p>\n<p><a href=\"http:\/\/help.adobe.com\/es_ES\/creativesuite\/cs\/using\/WSC7A1F924-DD38-49b4-B84B-EFF50416C860.html#WS62280CA5-B888-4191-B103-749BDE9DD861\">http:\/\/help.adobe.com\/es_ES\/creativesuite\/cs\/using\/WSC7A1F924-DD38-49b4-B84B-EFF50416C860.html#WS62280CA5-B888-4191-B103-749BDE9DD861<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Els arxius del tipus SVG poden ser incrustats en una p\u00e0gina web, en el codi HTML, per tant \u00e9s important que optimitzem l&#8217;arxiu i que siguem organitzats amb l&#8217;arxiu des Illustrator perqu\u00e8 en exportar no hagi codi innecessari. Agrupa elements en Illustrator nom\u00e9s si aix\u00f2 implica algun \u00fas pr\u00e0ctic en l&#8217;HTML, el codi SVG afegeix &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/introduccio\/optimitzar-svg-en-illustrator\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abOptimitzar SVG en Illustrator\u00bb<\/span><\/a><\/p>\n","protected":false},"author":59,"featured_media":0,"parent":1126,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[8],"class_list":["post-1246","page","type-page","status-publish","hentry","tag-illustrator","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/pages\/1246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/comments?post=1246"}],"version-history":[{"count":10,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/pages\/1246\/revisions"}],"predecessor-version":[{"id":1410,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/pages\/1246\/revisions\/1410"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/pages\/1126"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/media?parent=1246"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/tags?post=1246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}