Como crear un ficheiro SVG

Deseñador gráfico

Ao crear un sitio web, o deseñador web ten que ter en conta catro puntos principais pensando na maquetación e deseño visual da web, o texto, imaxes, cores e fontes empregados.

Destes catro puntos, ao que máis importancia lle imos dar nesta entrada son as imaxes, xa que imos falar como crear ficheiros svg xa que é moi importante ter en conta a calidade das imaxes coas que se traballa.

Tratamentos con ficheiros SVG, foi aumentando por profesionais e non tan profesionais do mundo do deseño.

Que é un ficheiro SVG?

Icona SVG

SVG é a abreviatura en inglés de Scalabe Vector Graphics, en español, Scalable Vector Graphics. Trátase dun formato aberto e libre co que crear gráficos 2D, dúas dimensións.

A diferenza doutros formatos de imaxe, como JPG ou PNG, SVG é un formato escalable, por moito que queiras aumentar o seu tamaño, xa que a calidade da imaxe manterase. É un dos formatos máis utilizados nas páxinas web para colocar gráficos ou imaxes vectoriais.

Por que debemos usar SVG?

Imaxes de pantalla tablet

Con este tipo de formato, as imaxes vectoriais manterán unha alta calidade, independentemente do seu tamaño e resolución. Pola contra, as imaxes formadas por mapas de bits, formadas por píxeles, perden calidade se se redimensionan. O formato SVG defínese pola súa lixeireza e versatilidade.

Outro dos puntos a favor do uso deste formato é o seu pequeno tamaño, é dicir, grazas a este aumenta a velocidade de carga das páxinas onde se atopan. Estas imaxes son construídas polo navegador, o que axuda a reducir a carga e o consumo no servidor.

Ademais, poden crear imaxes SVG animadas co que darlle un aire de proximidade á nosa web e chamar a atención dos espectadores que a visitan.

SVG é un formato aberto, é dicir, pode sufrir melloras e actualizacións. Ademais, os ficheiros SVG pódense editar con programas de edición vectorial, por exemplo Adobe Illustartor sen perder calidade na súa pantalla, pódese ver en calquera dispositivo. Tamén nos permite imprimilo sen perder calidade.

Como crear facilmente ficheiros SVG

Quizais a forma máis sinxela de crear ficheiros SVG, se estás familiarizado con eles, é mediante un programa de deseño gráfico, como Illustrator, Corel Draw, entre outros.

Centrándonos no programa Illustrator, cando imos utilizar o formato SVG, temos que ter en conta se utilizamos degradados ou outros efectos, como o efecto artístico, desenfoque, pinceis, píxeles, etc. xa que se rasterizan cando se gardan en formato de ficheiro SVG. Recoméndase usar efectos de filtro SVG, para engadir efectos para que non poidan ser rasterizados máis tarde.

Outro consello que che damos é o uso símbolos e camiños sinxelos nas ilustracións para un mellor rendemento de dito formato. Evite usar pinceis con moito trazado xa que isto xera unha maior carga de datos.

Para crear un ficheiro SVG neste programa, O primeiro que temos que ter aberto é un lenzo en branco onde traballaremos a nosa idea.

Unha vez rematado o noso traballo, o que imos facer é ir á barra de ferramentas que aparece enriba do programa, e seleccionaremos a opción de ficheiro, garda como e aparecerá unha pantalla emerxente na que nos indica que lle demos un nome ao noso ficheiro e indica o formato no que queremos gardalo. É neste último apartado onde debemos marcar a opción SVG.

Gardar ruta SVG Illustrator

 

Ao seleccionar o tipo de SVG, aparece un cadro de diálogo que nos mostra diferentes opcións que hai que ter en conta.

Opcións de gardar SVG

Como norma xeral, no primeiro campo que aparece na táboa aparece o perfil SVG 1.1. A continuación dános a opción de escoller as fontes, nas que nos dan o texto predeterminado marcado en SVG e subconxunto como ningún. No noso caso, esta obra non ten fontes, se o fixese, habería que cambiar a opción de subconxuntos de ningún a todos os pictogramas.

O seguinte apartado é moi importante, se sinalamos o opción incorporar, as imaxes da composición incorporaranse ao ficheiro, o que fará que engorde se utilizamos moitas imaxes de mapa de bits. Se, pola contra, marcamos a opción de enlazar, debemos ter coidado coas imaxes se as imos empregar nunha web, xa que debemos incluír os ficheiros das nosas imaxes, e tamén, moi importante, manter o seu uso. camiño. A vantaxe desta opción é que os ficheiros pesarán moito menos.

Pantalla de opcións SVG

Na sección de opcións avanzadas atopamos a opción para Código SVG, esta opción indicará como está o ficheiro dentro, é dicir, o código detrás do noso traballo. Esta opción é esencial se queres engadir o teu ficheiro SVG, por exemplo ao teu WordPress persoal, só tes que copiar o código e engadilo directamente no teu editor HTML de WordPress.

O último consello que che damos é que ao gardar en formato SVG, ten en conta que se está a traballar con mesas de traballo diferentes, só se manterá a mesa de traballo activa.

Se queremos ir máis aló e aplicar efectos SVG á nosa ilustración, Illustrator ofrécenos un conxunto de efectos. Para iso, teremos que seleccionar un obxecto ou grupo. Para aplicar un efecto debemos seleccionar a xanela de efectos, filtros SVG e aplicalo.

Efectos SVG de Illustrator

Ao aplicar un filtro SVG, o programa de deseño móstranos unha fiestra onde Aparece unha lista de filtros que se poden aplicar., unha vez seleccionamos un, Illustrator móstranos como se ve, pero nunha versión rasterizada.

Filtro de turbulencia SVG Illustrator

Como xa viches, o O formato SVG foi unha revolución. Grazas ao seu potencial e á calidade que ofrece, fai moito máis atractivas as páxinas web que nos parecen sen sacrificar o rendemento, sempre que fagan un uso correcto do devandito formato. SVG converteuse na unión perfecta entre o mundo do deseño e desenvolvemento web.


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

Sexa o primeiro en opinar sobre

Deixa o teu comentario

Enderezo de correo electrónico non será publicado.

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.