A m\u00e9s permet que cada element i cada atribut dels arxius SVG es puguin animar, podem incloure codi javascript, refer\u00e8ncies a fulles d’estil en cascada i combinar-ho amb altres tecnologies com asp o php amb el que podem fer-ho servir com a substitut d’algunes tecnologies propiet\u00e0ries com Flash, tot aix\u00f2 sense necessitat que l’usuari instal\u00b7li cap aplicaci\u00f3 en el seu ordinador, ja que \u00e9s suportat per la major part dels navegadors actuals de forma nativa (http:\/\/caniuse.com\/svg<\/a>).<\/p>\n Finalment, SVG \u00e9s una recomanaci\u00f3 del\u00a0W3C i s’integra amb altres est\u00e0ndards del W3C com el DOM i XSL.<\/p>\n Quan creem un document SGV, Quina versi\u00f3 hem de fer servir?<\/b><\/p>\n No hi ha una norma general, per\u00f2 com en qualsevol altre format, normalment \u00e9s recomanable fer servir la versi\u00f3 m\u00e9s actual, per\u00f2 hem d’anar amb compte que la versi\u00f3 que utilitzem tingui compatibilitat completa amb el dispositiu on ho anem a visualitzar. Aix\u00ed, actualment i segons la web de la W3C podem veure:<\/p>\n SVG 1.1<\/i><\/a>\u00a0<\/i>\u00e9s una Recomanaci\u00f3 del W3C i \u00e9s la versi\u00f3 m\u00e9s recent de l’especificaci\u00f3 completa, una segona edici\u00f3 de SVG 1.1 que inclou aclariments i petites millores basades en els comentaris dels desenvolupadors es troba actualment a l’\u00faltima revisi\u00f3.<\/i><\/p>\n SVG Tiny 1.2<\/i><\/a>\u00a0<\/i>\u00e9s una Recomanaci\u00f3 del W3C, i es dirigeix als dispositius m\u00f2bils.”<\/i><\/p>\n Algunes q\u00fcestions pr\u00e8vies quan guardem un document en format SVG<\/b><\/p>\n Quan anem a utilitzar el format SVG amb Illustrator haurem de tenir en compte que els degradats i altres efectes es rasteritzen,<\/p>\n Segons es pot veure en les recomanacions que fa Adobe Illustrator<\/p>\n Com crear un arxiu SVG a Illustrator<\/b><\/p>\n Per crear el nostre arxiu SVG, obrirem una composici\u00f3 i treballarem amb ella com ho fem habitualment, quan acabem amb ella, farem el seg\u00fcent: a l’opci\u00f3 \u201cArchivo\u201d -> \u201cGuardar como\u201d (Maj\u00fascules+Ctrl+S) en el desplegable que se’ns obre i que ens permet posar un nom i indicar la ruta on volem guardar l’arxiu, hem d’escollir al desplegable \u201ctipo\u201d l’opci\u00f3 SVG.<\/p>\n En guardar en aquest format s’obrir\u00e0 un nou quadre de di\u00e0leg amb algunes opcions que haurem de tenir en compte.<\/p>\n El primer camp ens permet escollir la versi\u00f3 de SVG que volem escollir, generalment farem servir SVG 1.1<\/b>. La seg\u00fcent opci\u00f3 ens permet escollir les fonts, encara que l’opci\u00f3 \u201cAdobe CEF\u201d permet veure millor les fonts petites, aquesta opci\u00f3 no \u00e9s compatible amb la major part dels visors de SVG ni amb la major part dels navegadors web, pel que aquesta opci\u00f3 l’utilitzarem nom\u00e9s quan sapiguem que el visor \u00e9s compatible, sin\u00f3, i com a regla general escollirem l’opci\u00f3 SVG. Tret que sapiguem amb seguretat que els usuaris finals tindran \u00a0instal\u00b7lades en el seu dispositiu les fonts que hem utilitzat, escollirem en subconjunt,\u00a0todos los pictogramas<\/b>.<\/p>\n La seg\u00fcent opci\u00f3 \u00e9s bastant important (im\u00e1genes) i acostuma a portar a error de forma bastant habitual. Generalment i tret que anem a utilitzar la nostra composici\u00f3 en una web, \u00e9s interessant fer servir l’opci\u00f3 \u201cincrustar\u201d, d’aquesta manera totes les imatges utilitzades a la composici\u00f3 s’incorporen a l’arxiu, l’\u00fanic problema \u00e9s que l’arxiu augmentar\u00e0 bastant de pes si utilitzem moltes imatges de mapa de bits. Si fem servir l’opci\u00f3 \u201cenlazar\u201d hem de tenir molta cura amb les imatges i si enviem la nostra composici\u00f3 o la posem a una web, haurem d’incloure els arxius de les nostres imatges, i a m\u00e9s mantenir la ruta relativa dels mateixos. T\u00e9 l’avantatge que l’arxiu pesar\u00e0 molt menys i que a m\u00e9s podrem, si volem, canviar les imatges senzillament substituint-les on les tinguem guardades per unes altres, la qual cosa ens pot aportar opcions molt interessants a l’hora de crear, per exemple, webs din\u00e0miques.<\/p>\n Tenim altres opcions \u201cavanzadas” deixarem les que es troben per defecte, encara que \u00e9s recomanable que per curiositat, per veure com \u00e9s l’arxiu SVG, premem l’opci\u00f3 \u201cmostrar c\u00f3digo SVG\u201d que com el seu nom indica ens ensenyar\u00e0 com \u00e9s l’arxiu \u201cper dins\u201d.<\/p>\n Quan es guarden il\u00b7lustracions en format SVG, els objectes de malla es rasteritzen. A m\u00e9s, les imatges que no tinguin canal alfa es converteixen al format JPEG. Les imatges amb un canal alfa es converteixen al format PNG. Si el document cont\u00e9 diverses taules de treball i es guarda en format SVG, es conserva la taula de treball activa. Les taules de treball no es poden guardar com a arxius SVG independents.<\/p>\n M\u00e9s informaci\u00f3 a la web d’Adobe<\/p>\n http:\/\/help.adobe.com\/es_ES\/illustrator\/cs\/using\/WS714a382cdf7d304e7e07d0100196cbc5f-6561a.html#WS714a382cdf7d304e7e07d0100196cbc5f-655ba<\/a><\/p>\n Guardar un arxiu SVG amb Inkscape <\/b><\/p>\n Inkscape utilitza SVG com a format natiu per guardar els seus documents, encara que ens permetr\u00e0 quan ho guardem escollir entre diversos formats de SVG<\/p>\n Una altra entrada relacionada de l’espai de recursos de la UOC<\/p>\n Web oficial de l’est\u00e0ndard\u00a0W3C<\/p>\n Altres enlla\u00e7os d’inter\u00e8s<\/p>\n <\/p>","protected":false},"excerpt":{"rendered":" SVG (Scalable Vector Graphics)\u00e9s un llenguatge per descriure gr\u00e0fics vectorials bidimensionals en XML. Inicialment SVG s’utilitza per definir els gr\u00e0fics basats en vectors per a la web.<\/p>\n Els documents SVG estan escrits enformat XML amb el que podrem editar-ho amb un simple bloc de notes. T\u00e9 molts avantatges, en primer lloc no \u00e9s un format propietari per tant es pot editar amb molt\u00edssims programes, molts d’ells lliures comInkscape.<\/p>\n A m\u00e9s permet que cada element i cada atribut dels arxius SVG es puguin animar, podem incloure codi javascript, refer\u00e8ncies a fulles d’estil en cascada i combinar-ho amb altres tecnologies com asp o php amb el que podem fer-ho servir com a substitut d’algunes tecnologies propiet\u00e0ries com Flash ….<\/p>\n","protected":false},"author":58,"featured_media":0,"parent":1126,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[18],"class_list":["post-1067","page","type-page","status-publish","hentry","tag-inkscape","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/pages\/1067","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\/58"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":11,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/pages\/1067\/revisions"}],"predecessor-version":[{"id":1416,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/pages\/1067\/revisions\/1416"}],"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=1067"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
![\"Captura1\"](\"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/files\/2014\/04\/Captura1-300x228.jpg\")
<\/a><\/p>\n\n
\n
\n
\n