{"id":1067,"date":"2014-04-06T08:31:33","date_gmt":"2014-04-06T08:31:33","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/?p=1067"},"modified":"2016-02-26T19:17:04","modified_gmt":"2016-02-26T19:17:04","slug":"format-svg-i-exportacio-des-de-diferents-programes","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/introduccio\/format-svg-i-exportacio-des-de-diferents-programes\/","title":{"rendered":"Formato SVG y exportaci\u00f3n desde distintos programas"},"content":{"rendered":"<p><\/p>\n<p style=\"text-align: justify\">SVG (Scalable Vector Graphics) es un lenguaje para describir gr\u00e1ficos vectoriales bidimensionales en XML.Inicialmente SVG se utiliza para definir los gr\u00e1ficos basados \u200b\u200ben vectores para la web.<\/p>\n<p style=\"text-align: justify\">Lo documentos SVG est\u00e1n escritos formato XML con lo que podremos editarlo con un simple block de notas. Tiene muchas ventajas, en primer lugar que no es un formato propietario por tanto se puede editar con much\u00edsimos programas, muchos de ellos libres como <a href=\"http:\/\/inkscape.org\/\" target=\"_blank\">Inkscape<\/a>.<!--more--><\/p>\n<p style=\"text-align: justify\">Adem\u00e1s\u00a0 permite que cada elemento y cada atributo de los archivos SVG se puedan animar, podemos incluir c\u00f3digo javascript , referencias a hojas de estilo en cascada y combinarlo con otras tecnolog\u00edas como asp, o php con lo que podemos usarlo como sustituto de algunas tecnolog\u00edas propietarias como es Flash, todo ello sin necesidad de que el usuario instale ninguna aplicaci\u00f3n en su ordenador ya que es soportado por la mayor parte de los navegadores actuales de forma nativa (<a href=\"http:\/\/caniuse.com\/svg\">http:\/\/caniuse.com\/svg<\/a>) .<\/p>\n<p style=\"text-align: justify\">Por \u00faltimo, SVG es una recomendaci\u00f3n de W3C y se integra con otros est\u00e1ndares del W3C como el DOM y XSL<\/p>\n<p style=\"text-align: justify\"><b>Cu\u00e1ndo creamos un documento SGV, \u00bfQu\u00e9 versi\u00f3n debemos usar?<\/b><\/p>\n<p style=\"text-align: justify\">No hay una norma general, pero como en cualquier otro formato, normalmente es recomendable usar la versi\u00f3n m\u00e1s actual, pero tenemos que tener cuidado de que la versi\u00f3n que usemos tenga compatibilidad completa con el dispositivo donde lo vamos a visualizar. As\u00ed, actualmente y seg\u00fan la web de la W3C podemos ver:<\/p>\n<p style=\"text-align: justify\"><a href=\"http:\/\/www.w3.org\/TR\/SVG11\/\"><i>SVG 1.1<\/i><\/a><i>\u00a0es una Recomendaci\u00f3n del W3C y es la versi\u00f3n m\u00e1s reciente de la especificaci\u00f3n completa, una segunda edici\u00f3n de SVG 1.1 que incluye aclaraciones y peque\u00f1as mejoras basadas en los comentarios de los \u00a0desarrolladores se encuentra actualmente en la \u00faltima revision.<\/i><\/p>\n<p style=\"text-align: justify\"><a href=\"http:\/\/www.w3.org\/TR\/SVGTiny12\/\"><i>SVG Tiny 1.2<\/i><\/a><i>\u00a0es una Recomendaci\u00f3n del W3C, y se dirige a los dispositivos m\u00f3viles.\u201d<\/i><\/p>\n<p style=\"text-align: justify\"><b>Algunas cuestiones previas cuando guardamos un documento en formato SVG<\/b><\/p>\n<p style=\"text-align: justify\">Cuando vayamos a usar el formato SVG con Illustrator tendremos que tener en cuenta que\u00a0 los degradados y otros efectos se rasterizan,<\/p>\n<p style=\"text-align: justify\">Seg\u00fan se puede ver en las recomendaciones que hace Adobe Illustrator<\/p>\n<ul style=\"text-align: justify\">\n<li><i>Las mallas de degradado y los objetos que utilizan los efectos Rasterizar, Art\u00edstico, Desenfocar, Trazos de pincel, Distorsionar, Pixelizar, Enfocar, Boceto, Estilizar, Textura y V\u00eddeo se rasterizan al guardarse en formato SVG. De forma similar, los estilos gr\u00e1ficos que incluyen estos efectos tambi\u00e9n producen rasterizado. Utilice los efectos de filtro SVG para a\u00f1adir efectos de gr\u00e1fico sin rasterizar.<\/i><\/li>\n<li><i>Utilice s\u00edmbolos y simplifique los trazados de la\u00a0ilustraci\u00f3n para mejorar el rendimiento de SVG. Asimismo, evite la utilizaci\u00f3n de pinceles que produzcan muchos datos de trazado, como\u00a0Carboncillo, Cenizas y Pluma m\u00faltiple, en caso de que el\u00a0rendimiento sea de alta prioridad.<\/i><\/li>\n<\/ul>\n<p style=\"text-align: justify\"><b>Como crear un archivo SVG en Illustrator<\/b><\/p>\n<p style=\"text-align: justify\">Para crear nuestro archivo SVG, abriremos una composici\u00f3n y trabajaremos con ella como lo hacemos habitualmente, cuando terminemos con ella, lo que vamos a hacer es lo siguiente; \u00a0en la opci\u00f3n \u201carchivo\u201d -&gt; \u201cGuardar como\u201d (May\u00fasculas+Ctrl+S) en el desplegable que se nos abre y que nos permite poner un nombre e indicar la ruta donde queremos guardar el archivo, debemos escoger en el desplegable \u201ctipo\u201d la opci\u00f3n SVG.<\/p>\n<p style=\"text-align: justify\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1070 alignright\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/files\/2014\/04\/Captura1-300x228.jpg\" alt=\"Captura1\" width=\"300\" height=\"228\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/files\/2014\/04\/Captura1-300x228.jpg 300w, http:\/\/multimedia.uoc.edu\/blogs\/labeines\/files\/2014\/04\/Captura1.jpg 538w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: justify\">Al guardar en este formato nos abrir\u00e1 un nuevo cuadro de dialogo con algunas opciones que deberemos tener en cuenta.<\/p>\n<p style=\"text-align: justify\">El primer campo nos permite escoger la versi\u00f3n de SVG que queremos escoger, <b>generalmente usaremos SVG 1.1<\/b>. La siguiente opci\u00f3n nos permite escoger las fuentes, aunque la opci\u00f3n \u201cadobe CEF\u201d permite ver mejor las fuentes peque\u00f1as, esta opci\u00f3n no es compatible con la mayor parte de los visores de SVG ni con la mayor parte de los navegadores web por lo que esta opci\u00f3n la usaremos solo en ocasiones que sepamos que el visor es compatible, sino, y como regla general escogeremos la opci\u00f3n SVG. Salvo que sepamos con seguridad que los usuarios finales van a tener instaladas en su dispositivo las fuentes que hemos usado, escogeremos en subconjunto, <b>todos los pictogramas<\/b>.<\/p>\n<p style=\"text-align: justify\">La siguiente opci\u00f3n es bastante importante (im\u00e1genes)\u00a0 y suele llevar a errores de forma bastante habitual. Generalmente y salvo que vayamos a usar nuestra composici\u00f3n en una web, es interesante usar la opci\u00f3n \u201cincrustar\u201d, de esta forma todas las im\u00e1genes usadas en la composici\u00f3n se incorporan al archivo, el \u00fanico problema es que en archivo aumentara bastante de peso si usamos muchas im\u00e1genes de mapa de bits. Si usamos la opci\u00f3n \u201cenlazar\u201d tenemos que tener mucho cuidado con las im\u00e1genes y si enviamos nuestra composici\u00f3n o la ponemos una web, deberemos incluir los archivos de nuestras im\u00e1genes, y adem\u00e1s mantener la ruta relativa de los mismos. Tiene la ventaja de que el archivo pesara mucho menos y que adem\u00e1s podremos, si queremos, cambiar las im\u00e1genes sencillamente sustituy\u00e9ndolas en donde las tengamos guardadas por otras, lo cual nos puede aportar opciones muy interesantes a la hora de crear, por ejemplo, webs din\u00e1micas.<\/p>\n<p style=\"text-align: justify\">Tenemos otras opciones \u201cavanzadas que dejaremos las que se encuentran por defecto, aunque es recomendable que por curiosidad, para ver como es el archivo SVG, pulsemos la opci\u00f3n \u201cmostrar c\u00f3digo SVG\u201d que como su nombre indica nos ense\u00f1ara como es el archivo \u201cpor dentro\u201d<\/p>\n<p style=\"text-align: justify\">Cuando guarde ilustraciones en formato SVG, los objetos de malla se rasterizan. Adem\u00e1s, las im\u00e1genes que no tengan canal alfa se convierten al formato JPEG. Las im\u00e1genes con un canal alfa se convierten al formato PNG. Si el documento contiene varias mesas de trabajo y lo guarda en formato\u00a0SVG, se conserva la mesa de trabajo activa. Las mesas de trabajo no se pueden guardar como archivos SVG independientes.<\/p>\n<p style=\"text-align: justify\">M\u00e1s informaci\u00f3n en la web de adobe<\/p>\n<p style=\"text-align: justify\"><a href=\"http:\/\/help.adobe.com\/es_ES\/illustrator\/cs\/using\/WS714a382cdf7d304e7e07d0100196cbc5f-6561a.html#WS714a382cdf7d304e7e07d0100196cbc5f-655ba\">http:\/\/help.adobe.com\/es_ES\/illustrator\/cs\/using\/WS714a382cdf7d304e7e07d0100196cbc5f-6561a.html#WS714a382cdf7d304e7e07d0100196cbc5f-655ba<\/a><\/p>\n<p style=\"text-align: justify\"><b>Guardar un archivo SVG con Inkscape <\/b><\/p>\n<p style=\"text-align: justify\">Inkscape usa SVG como formato nativo para guardar sus documentos, aunque nos permitir\u00e1 cuando lo guardemos escoger entre varios formatos de SVG<\/p>\n<ul style=\"text-align: justify\">\n<li>SVG de Inkscape, es una variaci\u00f3n del formato est\u00e1ndar s\u00f3lo que con unos pocos comandos adicionales. Si vamos a editar un documento \u00a0svg\u00a0 lnkscape en cualquier otro editor de SVG\u00a0 o queremos visualizarlo mediante un navegador web es muy \u00a0recomendable no usar este formato ya que generalmente no es compatible.<\/li>\n<li>SVG Plano. Es un\u00a0formato de archivo de Inkscape hecho para la compatibilidad entre los programas de dibujo SVG, y que elimina toda la informaci\u00f3n relacionada con el programa que no tiene ninguna utilidad.<\/li>\n<li>Por \u00faltimo tenemos la opci\u00f3n de SVG optimizado que nos abrir\u00e1 un cuadro de dialogo que nos permite escoger algunas opciones de configuraci\u00f3n como la de decidir si queremos\u00a0 incrustar o no, nuestras im\u00e1genes.<\/li>\n<\/ul>\n<p style=\"text-align: justify\">Otra entrada relacionada del espacio de recursos de la UOC<\/p>\n<ul style=\"text-align: justify\">\n<li><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/software\/illustrator\/exportacio-de-grafics-a-diferents-formats\/\">http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/software\/illustrator\/exportacio-de-grafics-a-diferents-formats\/<\/a><\/li>\n<\/ul>\n<p style=\"text-align: justify\">Web oficial del est\u00e1ndar W3C<\/p>\n<ul style=\"text-align: justify\">\n<li><a href=\"http:\/\/www.w3.org\/Graphics\/SVG\">http:\/\/www.w3.org\/Graphics\/SVG<\/a><\/li>\n<\/ul>\n<p style=\"text-align: justify\">Otros enlaces de inter\u00e9s<\/p>\n<ul>\n<li style=\"text-align: justify\"><a href=\"http:\/\/www.joshuawinn.com\/svg-export-settings-for-the-web-with-adobe-illustrator\/\">http:\/\/www.joshuawinn.com\/svg-export-settings-for-the-web-with-adobe-illustrator\/<\/a><\/li>\n<li style=\"text-align: justify\"><a href=\"http:\/\/minid.net\/2012\/10\/26\/descubre-el-fabuloso-mundo-de-svg\/\">http:\/\/minid.net\/2012\/10\/26\/descubre-el-fabuloso-mundo-de-svg\/<\/a><\/li>\n<li style=\"text-align: justify\"><a href=\"http:\/\/creativedroplets.com\/export-svg-for-the-web-with-illustrator-cc\/\">http:\/\/creativedroplets.com\/export-svg-for-the-web-with-illustrator-cc\/<\/a><\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>SVG (Scalable Vector Graphics)  es un lenguaje para describir gr\u00e1ficos vectoriales bidimensionales en XML.Inicialmente SVG se utiliza para definir los gr\u00e1ficos basados \u200b\u200ben vectores para la web.<br \/>\nLo documentos SVG est\u00e1n escritos formato XML con lo que podremos editarlo con un simple block de notas. Tiene muchas ventajas, en primer lugar que no es un formato propietario por tanto se puede editar con much\u00edsimos programas, muchos de ellos libres como Inkscape . Adem\u00e1s  permite que cada elemento y cada atributo de los archivos SVG se puedan animar, podemos incluir c\u00f3digo javascript , referencias a hojas de estilo en cascada y combinarlo con otras tecnolog\u00edas como asp, o php con lo que podemos usarlo como sustituto de algunas tecnolog\u00edas propietarias como es Flash&#8230;.<\/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\/es\/wp-json\/wp\/v2\/pages\/1067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":11,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/pages\/1067\/revisions"}],"predecessor-version":[{"id":1416,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/pages\/1067\/revisions\/1416"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/pages\/1126"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}