SVG

Scalable Vector Graphics (SVG) é um formato de imagem vetorial baseado em XML para definição de gráficos bidimensionais, com suporte para interatividade e animação. A especificação SVG é um padrão aberto desenvolvido pelo World Wide Web Consortium desde 1999.

As imagens SVG são definidas em formato gráfico vetorial e armazenadas em arquivos de texto XML. As imagens SVG podem, portanto, ser dimensionadas sem perda de qualidade, e os arquivos SVG podem ser pesquisados, indexados, programados e compactados. Os arquivos de texto XML podem ser criados e editados com editores de texto ou editores de gráficos vetoriais e são renderizados pelos navegadores mais utilizados.

A adoção antecipada foi limitada devido à falta de suporte em versões mais antigas do Internet Explorer. No entanto, a partir de 2011, todos os principais navegadores de desktop começaram a oferecer suporte a SVG. O suporte nativo ao navegador oferece várias vantagens, como não exigir plug-ins, permitir que SVG seja misturado com outros conteúdos e melhorar a renderização e a confiabilidade dos scripts. O suporte móvel para SVG existe em várias formas, com diferentes dispositivos e navegadores suportando SVG Tiny 1.1 ou 1.2. SVG pode ser produzido usando editores gráficos vetoriais e renderizado em formatos raster. Em aplicativos baseados na web, o Inline SVG permite incorporar conteúdo SVG em documentos HTML.

Apesar dos benefícios, o SVG pode representar riscos de segurança se usado para imagens, pois pode hospedar scripts ou CSS, o que pode levar a ataques de script entre sites ou outras vulnerabilidades.

Histórico

O SVG está em desenvolvimento no World Wide Web Consortium (W3C) desde 1999, após seis propostas concorrentes para linguagens gráficas vetoriais terem sido submetidas ao consórcio durante 1998 (veja abaixo).

O primeiro Grupo de Trabalho SVG decidiu não desenvolver nenhuma das submissões comerciais, mas criar uma nova linguagem de marcação que fosse informada, mas não realmente baseada em nenhuma delas.

O SVG foi desenvolvido pelo Grupo de Trabalho SVG do W3C a partir de 1998, depois que seis inscrições concorrentes de gráficos vetoriais foram recebidas naquele ano:

• Web Schematics, do CCLRC
• PGML, da Adobe Systems, IBM, Netscape e Sun Microsystems
• VML, por Autodesk, Hewlett-Packard, Macromedia, Microsoft e Vision
• Hyper Graphics Markup Language (HGML), de Orange UK e PRP
• WebCGM, da Boeing, InterCAP Graphics Systems, Inso Corporation, CCLRC e Xerox
• DrawML, da Excosoft AB

O grupo de trabalho era presidido na época por Chris Lilley do W3C.

A especificação SVG foi atualizada para a versão 1.1 em 2011. Scalable Vector Graphics 2 tornou-se uma recomendação candidata do W3C em 15 de setembro de 2016. SVG 2 incorpora vários novos recursos além daqueles do SVG 1.1 e SVG Tiny 1.2.

Versão 1.x

• SVG 1.0 tornou-se uma Recomendação W3C em 4 de setembro de 2001.
• SVG 1.1 tornou-se uma Recomendação W3C em 14 de janeiro de 2003. A especificação SVG 1.1 é modularizada para permitir que subconjuntos sejam definidos como perfis. Além disso, há muito pouca diferença entre SVG 1.1 e SVG 1.0.
  • SVG Tiny e SVG Basic (os Mobile SVG Profiles) tornaram-se W3C Recomendações em 14 de janeiro de 2003. Estes são descritos como perfis de SVG 1.1.
• SVG Tiny 1.2 tornou-se uma Recomendação W3C em 22 de dezembro de 2008. Foi inicialmente elaborado como um perfil do SVG Full 1.2 (que desde então foi descartado em favor do SVG 2), mas mais tarde foi refactored como uma especificação autônoma. É geralmente mal suportado.
• SVG 1.1 Segunda Edição, que inclui todas as erratas e esclarecimentos, mas nenhuma nova característica do SVG 1.1 original foi lançada em 16 de agosto de 2011.
• SVG Tiny 1.2 Portable/Secure, Um subconjunto mais seguro do perfil SVG Tiny 1.2 introduzido como um padrão IETF em 29 de julho de 2020. Também conhecido como SVG Tiny P/S. SVG Tiny 1.2 Portable/Secure é uma exigência do padrão de rascunho do BIMI.

Versão 2

SVG 2 remove ou descontinua alguns recursos do SVG 1.1 e incorpora novos recursos do HTML5 e do Web Open Font Format:

• Por exemplo, SVG 2 remove vários elementos de fonte, como glyph e altGlyph (substituído pelo formato de fonte WOFF).
• O xml:space atributo é deprecated em favor de CSS.
• Recursos HTML5 tais como translate e data-* atributos foram adicionados.
• Recursos de manuseio de texto do SVG Tiny 1.2 são anotados a serem incluídos, mas ainda não formalizados em texto. Algumas outras 1,2 características são cerejeira escolhida, mas SVG 2 não é um superset de SVG minúsculo 1,2 em geral.

O SVG 2 atingiu a fase de recomendação candidata em 15 de setembro de 2016, e as versões revisadas foram publicadas em 7 de agosto de 2018 e 4 de outubro de 2018. A versão mais recente foi lançada em 21 de março de 2022.

Recursos

SVG suporta interatividade, animação e recursos gráficos avançados, tornando-o adequado para aplicações web e de impressão. Imagens SVG podem ser compactadas com o algoritmo gzip, resultando em arquivos SVGZ que são normalmente 20-50% menores que o original. SVG também oferece suporte a metadados, permitindo melhor indexação, pesquisa e recuperação de conteúdo SVG.

SVG permite três tipos de objetos gráficos: formas gráficas vetoriais (como caminhos que consistem em linhas retas e curvas), imagens bitmap e texto. Os objetos gráficos podem ser agrupados, estilizados, transformados e compostos em objetos previamente renderizados. O conjunto de recursos inclui transformações aninhadas, caminhos de recorte, máscaras alfa, efeitos de filtro e objetos de modelo. Os desenhos SVG podem ser interativos e podem incluir animação, definida nos elementos SVG XML ou via script que acessa o Document Object Model (DOM) SVG.

SVG usa CSS para estilização e JavaScript para scripts. O texto, incluindo internacionalização e localização, aparecendo em texto simples no SVG DOM, melhora a acessibilidade dos gráficos SVG.

Impressão

Embora a especificação SVG se concentre principalmente na linguagem de marcação de gráficos vetoriais, seu design inclui os recursos básicos de uma linguagem de descrição de página como o PDF da Adobe. Ele contém recursos para gráficos ricos e é compatível com CSS para fins de estilo. SVG possui as informações necessárias para colocar cada glifo e imagem em um local escolhido em uma página impressa.

Script e animação

Desenhos SVG podem ser dinâmicos e interativos. Modificações baseadas no tempo nos elementos podem ser descritas em SMIL ou podem ser programadas em uma linguagem de script (por exemplo, JavaScript). O W3C recomenda explicitamente SMIL como padrão para animação em SVG.

Um rico conjunto de manipuladores de eventos, como "onmouseover" e "onclick" pode ser atribuído a qualquer objeto gráfico SVG para aplicar ações e eventos.

Perfis móveis

Devido à demanda do setor, dois perfis móveis foram introduzidos com o SVG 1.1: SVG Tiny (SVGT) e SVG Basic (SVGB).

Esses são subconjuntos do padrão SVG completo, destinados principalmente a agentes de usuários com capacidades limitadas. Em particular, o SVG Tiny foi definido para dispositivos móveis altamente restritos, como celulares; ele não oferece suporte a estilos ou scripts. SVG Basic foi definido para dispositivos móveis de nível superior, como smartphones.

Em 2003, o 3GPP, um grupo internacional de padrões de telecomunicações, adotou o SVG Tiny como formato de mídia gráfica vetorial obrigatório para telefones da próxima geração. SVGT é o formato gráfico vetorial necessário e o suporte de SVGB é opcional para serviço de mensagens multimídia (MMS) e serviço de streaming comutado por pacotes. Posteriormente, foi adicionado como formato necessário para gráficos vetoriais no 3GPP IP Multimedia Subsystem (IMS).

Nenhum perfil móvel inclui suporte para o Document Object Model (DOM) completo, enquanto apenas o SVG Basic tem suporte opcional para scripts, mas como são subconjuntos totalmente compatíveis do padrão completo, a maioria dos gráficos SVG ainda podem ser renderizados por dispositivos que suporta apenas os perfis móveis.

SVGT 1.2 adiciona um microDOM (μDOM), estilo e script. O SVGT 1.2 também inclui alguns recursos não encontrados no SVG 1.1, incluindo traços sem escala, que são suportados por algumas implementações do SVG 1.1, como Opera, Firefox e WebKit. À medida que as bases de código compartilhadas entre navegadores de desktop e móveis aumentaram, o uso de SVG 1.1 em vez de SVGT 1.2 também aumentou.

Compressão

As imagens SVG, sendo XML, contêm muitos fragmentos repetidos de texto, por isso são adequadas para algoritmos de compactação de dados sem perdas. Quando uma imagem SVG é compactada com o algoritmo gzip, ela é chamada de "SVGZ" imagem e usa a extensão de nome de arquivo .svgz correspondente. Os visualizadores SVG 1.1 em conformidade exibirão imagens compactadas. Um arquivo SVGZ normalmente tem de 20 a 50 por cento do tamanho original. O W3C fornece arquivos SVGZ para testar a conformidade.

Projeto

A especificação SVG 1.1 define 14 áreas funcionais ou conjuntos de recursos:

Caminhos

As linhas de forma simples ou composta são desenhadas com linhas curvas ou retas que podem ser preenchidas, delineadas ou usadas como um caminho de recorte. Os caminhos têm uma codificação compacta.

Por exemplo, M (para "move to") precede o numérico inicial x e Sim. coordenadas, e L (para "linha a") precede um ponto ao qual uma linha deve ser traçada. Outras letras de comando (C, S, Q, Te A) preceder dados que são usados para desenhar várias curvas Bézier e elípticas. Z é usado para fechar um caminho.

Em todos os casos, as coordenadas absolutas seguem comandos de letras maiúsculas e coordenadas relativas são usadas após as letras minúsculas equivalentes.

Formas básicas

Caminhos e caminhos de linha reta feitos de uma série de segmentos de linha reta conectados (polilines), bem como polígonos fechados, círculos e elipses podem ser desenhados. Os retângulos e os retângulos redondos também são elementos padrão.

Texto

O texto de caracteres Unicode incluído em um arquivo SVG é expresso como dados de caracteres XML. Muitos efeitos visuais são possíveis, e a especificação SVG lida automaticamente com o texto bidirecional (para compor uma combinação de texto em inglês e árabe, por exemplo), texto vertical (como chinês ou japonês pode ser escrito) e personagens ao longo de um caminho curvo (como o texto em torno da borda do Grande Selo dos Estados Unidos).

Pintura

As formas SVG podem ser preenchidas e delineadas (pintadas com uma cor, um gradiente ou um padrão). Os preenchimentos podem ser opacos ou ter qualquer grau de transparência.

"Markers" são características de fim de linha, como flechas, ou símbolos que podem aparecer nos vértices de um polígono.

Cor

As cores podem ser aplicadas a todos os elementos SVG visíveis, diretamente ou via fill, stroke, e outras propriedades. As cores são especificadas da mesma forma que em CSS2, ou seja, usando nomes como black ou blue, em hexadecimal como #2f0 ou #22ff00, em decimal como rgb(255,255,127), ou em percentagem do formulário rgb(100%,100%,50%).

Gradientes e padrões

As formas SVG podem ser preenchidas ou delineadas com cores sólidas como acima, ou com gradientes de cor ou com padrões de repetição. Os gradientes de cor podem ser lineares ou radiais (circulares), e podem envolver qualquer número de cores, bem como repetições. Os gradientes de opacidade também podem ser especificados. Os padrões são baseados em objetos gráficos de raster ou vetores predefinidos, que podem ser repetidos em x e y direções. Gradientes e padrões podem ser animados e scripted.

Desde 2008, tem havido discussão entre usuários profissionais do SVG que ou malhas gradientes ou preferencialmente curvas de difusão poderiam ser adicionadas de forma útil à especificação SVG. Diz-se que uma "representação simples [usando curvas de difusão] é capaz de representar até mesmo efeitos de sombreamento muito sutis" e que "as imagens de curva de difusão são comparáveis tanto na qualidade quanto na eficiência de codificação com malhas gradientes, mas são mais simples de criar (de acordo com vários artistas que usaram ambas as ferramentas), e podem ser capturadas de bitmaps totalmente automaticamente". O atual rascunho de SVG 2 inclui malhas gradientes.

Clipping, mascaramento e composição

Elementos gráficos, incluindo texto, caminhos, formas básicas e combinações destes, podem ser usados como esboços para definir ambos interior e fora regiões que podem ser pintadas (com cores, gradientes e padrões) independentemente. Totalmente opaco caminhos de recorte e semi-transparente máscaras são composto juntos para calcular a cor e opacidade de cada pixel da imagem final, usando a mistura alfa.

Efeitos do filtro

Um efeito de filtro consiste em uma série de operações gráficas que são aplicadas a um determinado gráfico de vetor de origem para produzir um resultado bitmapped modificado.

Interatividade

Imagens SVG podem interagir com usuários de muitas maneiras. Além de hiperlinks como mencionado abaixo, qualquer parte de uma imagem SVG pode ser feita receptiva a eventos de interface do usuário, como alterações no foco, cliques do mouse, rolagem ou zoom da imagem e outros eventos de ponteiro, teclado e documento. Os manipuladores de eventos podem iniciar, parar ou alterar animações, bem como ativar scripts em resposta a tais eventos.

Ligação

Imagens SVG podem conter hiperlinks para outros documentos, usando XLink. Através do uso do elemento ou um identificador de fragmento, URLs podem ligar para arquivos SVG que alteram a área visível do documento. Isso permite a criação de estados de visão específicos que são usados para ampliar / sair de uma área específica ou limitar a visão a um elemento específico. Isso é útil ao criar sprites. Suporte XLink em combinação com o elemento também permite ligar e reutilizar elementos internos e externos. Isso permite que os codificadores fazer mais com menos marcação e faz para o código mais limpo.

Scripting

Todos os aspectos de um documento SVG podem ser acessados e manipulados usando scripts de forma semelhante ao HTML. A linguagem de script padrão é JavaScript e há objetos definidos Modelo de Objeto de Documento (DOM) para cada elemento e atributo SVG. Os scripts estão incluídos