Gráficos vectoriais escalables

Da Wikipedia, a enciclopedia libre.
Ir á navegación Ir á busca
Gráficos vectoriais escalables
Extensión .svg, .svgz
Tipo MIME image/svg+xml
Desenvolvido por W3C
1a publicación 4 de setembro de 2001
Última versión 1.1 (segunda edición) (16 de agosto de 2011)
Rapaz Gráficos vectoriais
Extensión de XML
¿Formato aberto ? Si
Páxina web www.w3.org/Graphics/SVG
Un exemplo de uso do formato SVG.

Gráficos vectoriais escalables (formato en .svg ), indica un formato particular que é capaz de amosar obxectos de gráficos vectoriais e, polo tanto, gardar imaxes para que se poidan ampliar e reducir a gusto sen perder a resolución de gráficos .

En particular, o formato svg funciona en XML , que é unha aplicación da metalingua baseada nos desenvolvementos da web do consorcio W3C , que ten como obxectivo describir figuras bidimensionais estáticas e animadas.

Situación

SVG converteuse nunha recomendación (estándar) do World Wide Web Consortium en setembro de 2001 despois dun proceso bastante mixto. No W3C Macromedia e Microsoft introduciron a linguaxe de marcado vectorial ( VML ), mentres que Adobe e Sun Microsystems propoñían un formato competidor chamado PGML : era necesario un traballo de compromiso para chegar á recomendación. SVG está soportado de xeito nativo polo navegador web / editor web Amaya , por Opera e Mozilla Firefox desde a versión 1.5. Outros navegadores para ver imaxes SVG requiren a adición dun complemento , como Adobe SVG Viewer ou Corel SVG Viewer .

Os editores e espectadores autónomos tamén poden ver as imaxes SVG. Unha versión particular de Mozilla , chamada "Croczilla", agora admite algunhas partes do estándar SVG, pero gran parte do rendemento aínda non se pode alcanzar: en perspectiva, con todo, as imaxes SVG deberían ser visibles sen engadir ningún complemento. O explorador web Konqueror do proxecto KDE tamén ten actualmente unha implementación bastante completa de SVG chamada ksvg e é de agardar que no futuro este soporte se adapte ao navegador web Safari de Apple Inc. O navegador Opera admite SVG desde a versión 8.5.

Os programas escritos en Java poden controlar a visualización, xeración e manipulación de gráficos SVG usando o Batik SVG Toolkit .

características

Bitmap VS SVG.svg

É posible resumir o que está contido na Visión xeral de SVG do consorcio W3C.

SVG permítelle tratar con tres tipos de obxectos gráficos:

Os obxectos gráficos pódense agrupar en obxectos máis completos, equipados con atributos de estilo e engadidos a obxectos gráficos construídos e mostrados previamente. Un texto pode formar parte de calquera espazo de nome XML que se poida enviar a unha aplicación; esta capacidade aumenta a busca e a accesibilidade das imaxes SVG. O repertorio de operacións factibles inclúe transformacións aniñadas, trazados de recorte , máscaras alfa , efectos de filtro , obxectos de modelo e extensibilidade .

As cifras expresadas usando SVG poden ser dinámicas e interactivas. O Document Object Model (DOM) para SVG, que inclúe o DOM XML completo, permite a animación directa e eficiente de gráficos vectoriais a través das linguaxes ECMAScript e SMIL . A obxectos gráficos SVG pódeselles asignar manipuladores de eventos extraídos dun amplo repertorio: dous exemplos cun papel fácil de entender son onmouseover e onclick . Grazas á compatibilidade de SVG con outros estándares web e grazas ao apoio mutuo destes mecanismos, os elementos SVG e outros elementos XML dunha páxina web poden equiparse con actuacións como scripts obtidos simultaneamente de diferentes espazos de nomes .

O sistema SVG rivalizou con Adobe Flash (declarado obsoleto o 31 de decembro de 2020 [1] ) en termos de potencial e eficiencia. Para unha primeira comparación cómpre ter en conta que, a diferenza de Flash, o SVG é un estándar aberto .

Uso

A maioría dos produtos de software de debuxo como Adobe Illustrator e Corel Draw en versións máis recentes son capaces de exportar imaxes descritas en SVG. O paquete OpenOffice.org Draw da versión 1.1 tamén pode exportar ficheiros SVG.

Dous programas de gráficos vectoriais de código aberto e multiplataforma que usan nativamente o formato SVG son Inkscape e Sodipodi .

Gráficos vectoriais escalables

O potencial dos gráficos vectoriais escalables é notable:

  • a xeometría de cada elemento gráfico defínese matemáticamente (en termos de vectores), en lugar de ser tratada por cadrados de píxeles ríxidos;
  • calquera elemento gráfico pódese redimensionar como queira, mantendo a súa calidade. Máis específicamente, ao ver un determinado obxecto gráfico en diferentes tipos de soportes ( impresión , vídeo , trazador , pantalla do teléfono móbil , etc.), seguro que sempre obterá a maior calidade que estes soportes poden proporcionar.

Este potencial afecta practicamente a todas as aplicacións gráficas que non son puramente raster , é dicir, baseadas en mapas de píxeles (na práctica imaxes de cámaras ou exploracións ).

Por outra banda, o "peso" computacional dunha imaxe vectorial é xeralmente superior ao dos gráficos raster, xa que o procesador do ordenador ten que rexenerar esencialmente a imaxe desde cero cada vez que se modifica o tamaño da pantalla.

A vantaxe de SVG sobre outros formatos de gráficos vectoriais reside na súa natureza como estándar aberto: deste xeito, en principio, calquera que o saiba é capaz de crear páxinas SVG sen necesidade dun ambiente de desenvolvemento comercial dedicado.

Ao ser un formato derivado de XML , herda del a facilidade de xeración con medios automáticos e a través de linguaxes de programación.

Finalmente, no lado do cliente é posible operar no modelo de obxecto do documento (o DOM ) usando o código ECMAScript (a estandarización de JavaScript definida por ECMA ).

Programas para crear svg

Aquí tes unha lista parcial de programas para xerar ficheiros svg:

HTML5

Icona de lupa mgx2.svg O mesmo tema en detalle: HTML5 .

Co estándar HTML5 o formato SVG converteuse en parte da linguaxe HTML. Pódese inserir un svg como imaxe (formato ".svg") ou mediante código. Desde o punto de vista do usuario, a nivel estético é o mesmo. As seguintes tres liñas de código producen o mesmo resultado estético (un círculo branco cun bordo verde), pero con tres técnicas diferentes:

Imaxe SVG

< img
    src = "circle.svg"
    alt = "círculo"
    altura = "200"
    width = "200" />

Código SVG

< svg width = "100" height = "100" >
  < circle cx = "200" cy = "200" r = "93"
  stroke = "# 66CC01" stroke-width = "4" fill = "E2FFC6" />
O seu navegador non admite SVG en liña.
</ svg >

Código de lona

función draw () {
    // debuxa a rexión de cores
    mainContext.beginPath ();
    mainContext.arc (200, 200, 93, 0, 2 * Math.PI, verdadeiro);
    mainContext.fillStyle = "# E2FFC6";
    mainContext.fill ();
 
    // debuxa o trazo
    mainContext.lineWidth = 20;
    mainContext.strokeStyle = "# 66CC01";
    mainContext.stroke ();
}

Diferenzas entre SVG e Canvas

SVG é unha linguaxe para describir gráficos 2D en XML [2] . Canvas debuxa gráficos 2D sobre a marcha (con JavaScript) [3] .

Comparación do logotipo CSS3 creado con CSS, con SVG e con HTML5 Canvas. Ás veces é posible acadar o mesmo resultado con diferentes técnicas.
Comparación do logotipo CSS3 creado con CSS, con SVG e con HTML5 Canvas. Ás veces é posible acadar o mesmo resultado con diferentes técnicas.

O SVG está baseado en XML, o que significa que todos os elementos están dispoñibles dentro do SVG DOM. Pode anexar controladores de eventos JavaScript para un elemento.

En SVG, cada forma debuxada é "recordada" como un obxecto. Se se cambian os atributos dun obxecto SVG, o navegador pode volver representar a forma automaticamente.

O Canvas (tamén un elemento HTML5) represéntase píxeles por píxeles. Unha vez debuxado o gráfico, o lenzo queda "esquecido" polo navegador. Se hai que cambiar a súa posición, hai que volver debuxar toda a escena, incluídos os obxectos que puideran estar cubertos polos gráficos [4] .

O Canvas é adecuado para aplicacións dinámicas como xogos e animacións, debido á súa carga máis rápida e independente do DOM.

As imaxes creadas en SVG engádense ao DOM e edítanse a través de JavaScript e Css , incluso con eventos presentes nos outros elementos do documento [5] .

Funcións [6] SVG Lenzo
Vectores SI NON
Rasterización NON SI
Acceso DOM SI NON
Accesibilidade SI Parcial
Texto SI SI
Gradientes e patróns SI SI
Animacións CSS SI NON
Filtros CSS SI SI
Filtros SVG SI SI
Inclusión de vídeo NON SI
Manipulación de píxeles NON SI
Acceso á API en JS NON SI

Personaxes

Como ocorre con HTML e CSS, o texto en SVG pode referirse a ficheiros de fontes externos, como os tipos de letra do sistema. Se os ficheiros de letra requiridos non existen na máquina onde se representa o ficheiro SVG, é posible que o texto non apareza como se esperaba. Para superar esta limitación, o texto pódese amosar nunha fonte SVG , onde os glifos requiridos defínense en SVG como unha fonte que logo é descrita polo elemento <text> [7] .

No lado do SEO , os SVG son máis accesibles porque admiten texto [8] que, a non ser que se converta en camiños, pode ser seleccionado polo usuario nunha páxina HTML e lexible polos motores de busca [9] .

Conexións

As imaxes SVG poden conter ligazóns a outros documentos mediante XLink. Mediante o uso do elemento <view> ou un identificador de fragmento, as URL poden ligarse a ficheiros SVG que cambian a área visible do documento. Isto permítelle crear estados de visualización específicos que se usan para ampliar / reducir unha área específica ou para limitar a vista a un elemento específico. Isto é útil cando se crean sprites . O soporte XLink en combinación co elemento <use> tamén permite a conexión e reutilización de elementos internos e externos. Isto permite aos programadores facer máis con menos marcado e limpa o código [10] .

Guión e animación

Antes da chegada de HTML5, o uso de Adobe Flash (obsoleto ao 31 de decembro de 2020) era o único xeito de crear animacións vectoriais e, en xeral, imaxes vectoriais para a web [11] .

Os deseños SVG poden ser dinámicos e interactivos. Os cambios baseados na animación pódense describir en SMIL ou poden programarse nunha linguaxe de script (por exemplo, ECMAScript ou JavaScript). O W3C recomenda explicitamente SMIL como estándar para a animación SVG.

O SVG tamén se pode animar con CSS3 [12] e ECMAScript .

Pódese asignar un rico conxunto de controladores de eventos como " onmouseover" e " onclick" a calquera obxecto gráfico SVG para aplicar accións e eventos [13] .

Animación SVG usando SMIL

 < animateTransform
   attributeName = "transformar"
   attributeType = "XML"
   type = "xirar"
   desde = "0"
   a = "360"
   begin = "0s"
   dur = "1s"
   repeatCount = "indefinido" />

Animación SVG usando CSS3

 < style type = "text / css" >
  @ keyframes rot_kf {
    desde { transformar : xirar ( 0 graos ); }
    para { transformar : xirar ( 360 graos ); }
  }
  . rot { animation : rot_kf 1 s lineal infinito ; }
 </ style >

Animación SVG usando ECMAScript

 < script type = "text / ecmascript" >
  función rotar ( evt ) {
   var obxecto = evt . obxectivo . propietarioDocumento . getElementById ( 'rot' );
   setInterval ( function () {
     var agora = nova Data ();
     var milisegundos = agora . getTime () % 1000 ;
     var graos = milisegundos * 0,36 ; 
     obxecto . setAttribute ( 'transformar' , 'rotar (' + graos + ')' );
    }, 20 );
  }
 < / script>

Datos Exif

En SVG é posible inserir metadatos Exif [14] .

< svg xmlns = "http://www.w3.org/2000/svg" xmlns: sol = "https://inkscape.org/it/" >
  < circle cx = "10" cy = "40" sol: country = "Italia" r = "10" />
</ svg >

Imaxes raster en SVG

No código svg pode inserir ou ligar imaxes raster (ou mapa de bits) como jpg, png ou gif.

Imaxe ligada:

 < svg ... >
  < image xlink: href = "/path/to/image.jpg" width = "100%" height = "100%" x = "0" y = "0" />
</ svg >

Imaxe incrustada:

 < svg >
< imaxe
       y = "130.35181"
       x = "47.050488"
       id = "image6820"
       xlink: href = "data: image / jpeg; base64, / 9j / 4AAQSkZJRgABAQEAlgCWAAD / 2 ../ >
</ svg >

Uso de CSS

Podes usar CSS para modificar estilos SVG. Exemplo:

 svg {
  cor de fondo : beis ;
}

Navegadores que admiten o formato svg e svgz

Aquí tes unha lista de navegadores que soportan polo menos a última versión dispoñible, polo menos en parte, co formato svg e svgz (svg comprimido);

O soporte para este formato está en constante evolución e coa sucesión de novas versións dos novos navegadores, a compatibilidade está en constante expansión.

Nota

  1. ^ Flash e o futuro do contido interactivo | Adobe Blog , en web.archive.org , 2 de decembro de 2017. Recuperado o 19 de xaneiro de 2021 (arquivado dende o orixinal o 2 de decembro de 2017) .
  2. ^ - SVG: Gráficos vectoriais escalables | MDN , en developer.mozilla.org . Consultado o 19 de xaneiro de 2021 .
  3. ^ Engadindo gráficos vectoriais á web - Aprende desenvolvemento web | MDN , en developer.mozilla.org . Consultado o 19 de xaneiro de 2021 .
  4. ^ HTML SVG , en www.w3schools.com . Consultado o 19 de xaneiro de 2021 .
  5. ^ SVG ou Canvas para o teu HTML5? , en Wellnet , 9 de maio de 2014. Consultado o 19 de xaneiro de 2021 .
  6. ^ (EN) Cando usar SVG vs. Cando usar o lenzo , en CSS-Tricks , 12 de novembro de 2019. Consultado o 29 de xaneiro de 2021 .
  7. ^ Fontes - SVG 1.1 (segunda edición) , en www.w3.org . Consultado o 19 de xaneiro de 2021 .
  8. ^ (EN) Cando usar SVG vs. Cando usar o lenzo , en CSS-Tricks , 12 de novembro de 2019. Consultado o 19 de xaneiro de 2021 .
  9. ^ seo - Os motores de busca indexan o texto contido nos elementos SVG? , en Webmasters Stack Exchange . Consultado o 19 de xaneiro de 2021 .
  10. ^ Ligazón - SVG 1.1 (segunda edición) , en www.w3.org . Consultado o 19 de xaneiro de 2021 .
  11. ^ Flash e o futuro do contido interactivo | Adobe Blog , en web.archive.org , 2 de decembro de 2017. Recuperado o 28 de xaneiro de 2021 (arquivado dende o orixinal o 2 de decembro de 2017) .
  12. ^ (EN) Animación SVG con CSS , CSS-Tricks, 17 de abril de 2014. Consultado o 28 de xaneiro de 2021.
  13. ^ (EN) Paul Feast, W3C lanza guións estándar, advertencia , en CNET. Consultado o 19 de xaneiro de 2021 .
  14. ^ - SVG: Gráficos vectoriais escalables | MDN , en developer.mozilla.org . Consultado o 19 de xaneiro de 2021 .

Elementos relacionados

Outros proxectos

Ligazóns externas

Control da autoridade LCCN (EN) sh2002004644 · GND (DE) 4658480-8 · BNF (FR) cb14487634q (data)
Internet Portal de Internet : accede ás entradas da Wikipedia que tratan de internet