BT

Disseminando conhecimento e inovação em desenvolvimento de software corporativo.

Contribuir

Tópicos

Escolha a região

Início Artigos Caminhando para uma web independente de resolução com SVG

Caminhando para uma web independente de resolução com SVG

Favoritos

A plataforma Web percorreu um longo caminho desde que o HTML5 se tornou popular e as pessoas começaram a olhar o JavaScript como uma linguagem que é capaz de construir aplicações complexas. Muitas APIs surgiram e existe conteúdo abundante sobre como os navegadores podem tratar todas elas.

Essa série específica de artigos irá um passo além e se concentra em como essas tecnologias podem ser usadas na prática, não somente para construir demonstrações ou protótipos, mas como os profissionais tem usado elas em produção. Nessa serie de artigos pós HTML5, vamos além do modismo e mostraremos detalhes práticos dos especialistas sobre o que realmente funcionou com eles. Também abordaremos tecnologias (como AngularJS) que vão um passo além e definem o futuro de como os padrões e desenvolvimento web irão evoluir.

Este artigo do InfoQ é parte da serie "Próxima geração do HTML5 e JavaScript". Você pode assinar para receber notificações via RSS.

Este artigo examina as vantagens de usar Scalable Vector Graphics (SVG) como formato preferido para arquivos gráficos para qualquer projeto web ou mobile.

O objetivo não é impedir os designers e desenvolvedores de usar outros formatos (PNG / JPEG), mas sim demonstrar como o uso do SVG pode melhorar o fluxo de trabalho dos dois principais ciclos de vida de qualquer projeto web: as etapas de design e desenvolvimento.

Designers

Ideal para os ícones da interfaces de usuário que são independentes de resolução

Durante o tempo da escrita deste artigo, era inevitável o meme "Achatamento do Design". A Microsoft aplicou sua abordagem de design moderno para todos os seus softwares bem como todas as interfaces de usuário para dispositivos móveis. Com o advento do iOS 7, a Apple magistralmente tem substituído os seus princípios de aparência e formato, em favor das boas práticas de design limpo e plano. Também não deve ser deixado para trás o lançamento que o Google fez da sua linguagem visual do "Material Design" que pode ser usado em qualquer lugar, desde aplicativos Android até sites web.

O "achatamento do design": aparência e formato com efeitos de água, sombras e pseudos 3D estão voltando para as formas simples.

Com os fundos dos componentes que simulam 3D voltando às cores primitivas e os botões esculpidos voltando a serem planos ambas abordagens podem ser facilmente implementada com elementos HTML e estilizados com CSS o foco do design de interface de usuários está caminhando para tipografia, layouts e ícones.

A principal vantagem do SVG bem divulgado em toda web é sua natureza escalável. Durante a montagem de um ícone, o designer não precisa se preocupar sobre "como ele vai ficar" em diferentes dimensões ou em dispositivos móveis com diferentes densidades de pixels, e se concentra apenas em fazer o recurso da melhor forma possível.

Com os SVGs não há necessidade de exportar dois diferentes formatos de arquivos com base em pixels para exibir em modo retina e não retina. Na verdade, não há necessidade de se preocupar com a densidade dos pixels em cada dispositivo, especialmente levando em conta a sua natureza não padronizada, mas sim mantendo o foco no trabalho artístico. Uma vez que o ícone está pronto, o designer exporta para um único arquivo no formato SVG, que pode ser redimensionado pelo desenvolvedor sem perda de qualidade.

Um passo a menos no fluxo de trabalho do designer. Não precisa exportar um recurso para uma versão @2x (ou @3x no futuro). O recurso SVG pode ser redimensionado pelo desenvolvedor sem perda de qualidade.

O redimensionamento do navegador está ficando melhor, mesmo em pequenas dimensões

Um desafio comum de design é: trabalhar no Photoshop, um ícone que parece bonito para dimensão de 44x44 pixels (amigável ao dedo), mas tente diminuir para 24x24 ou 16x16 e a interpolação bicubica vai introduzir o serrilhamento que pode borrar a imagem. Mesmo com algoritmos inteligentes como a interpolação bicubica "sharp" disponível nas últimas versões do Photoshop, muitos desenvolvedores terminam desenhando do zero às imagens dos menores arquivos (interface de ícones, favicons, etc.) para obter clareza.

Com os SVGs, o cenário a seguir é parcialmente mitigado pelo fato dos navegadores redimensionarem (e consequentemente a rasterização conversão de imagem vetorial para imagem com base em linhas ou pixels) os arquivos SVG muito bem. Isso é bem verdade para telas de alta densidade, tal como as últimas gerações de dispositivos móveis.

Os navegadores estão redimensionando cada vez melhor. Em certos casos, o navegador termina o redimensionamento com uma aparência melhor que os métodos avançados de interpolação do Photoshop.

Para obter resultados ótimos nessas dimensões, um designer pode facilmente "empacotar" todos os arquivos SVG como uma fonte de ícones (veja mais detalhes na sessão do Desenvolvedor a seguir) e isso influência a capacidade de destaque do subpixel em diversas operações do sistema, resultando em ícones de tamanhos como 12, 14 ou 16 pixels que parecem claros como cristal e com contornos nítidos mesmo em antigos navegadores IE.

Os elementos SVG podem ser "artesanais" para reduzir a complexidade e tamanho do arquivo

Otimizar uma imagem JPEG é um processamento de caminho único para reduzir o controle de qualidade, no entanto tentando não perder muita informação. Para itens PNG e GIF, o designer possui um pouco mais de controle através da habilidade para especificar uma paleta de restrições e também reduzir as informações de encode no arquivo.

Com o SVG, o designer meticuloso pode optar por usar formas primitivas, reduzindo o número de vértices em elementos de formas, bem como ter textos embutidos no SVG, ao invés de convertidos para esboços, todos os quais podem resultar em um arquivo SVG menos complexo e com tamanho reduzido.

O "Simplify" do Illustrator em ação. Os vértices que marcam um caminho vetorial podem ser reduzidos com perdas minimas de precisão, obtendo um arquivo SVG de menor tamanho.

Para mais otimizações, estranhas propriedades do SVG como comentários, ids ou tags (<g>) de agrupamento redundantes podem ser removidas, bem como a edição direta do código SVG.

Melhores ferramentas de código aberto

Para o Photoshop (e talvez Fireworks e Sketch), o mundo do código aberto oferece o editor Gimp. O Gimp é uma ferramenta valiosa com uma comunidade vibrante, mesmo quando comparado com as ferramentas mencionadas anteriormente, mas ainda inferior em algumas áreas. Substituir o Photoshop pelo Gimp não é uma tarefa fácil e geralmente resulta em um fluxo de trabalho bem complicado.

Para arte vetorial também temos o Inkscape, que é uma alternativa profissional de código aberto ao Illustrator da Adobe, pois permite que os designers criem e editem vetores com diversas ferramentas e procedimentos, similar ao que são usados nas ferramentas oferecidas pela Adobe. Muitas das ações de trabalho do "dia a dia" com vetores podem ser feitos muito bem no Inkscape, tal como operações booleanas que combinam formas, simplificação de caminhos, compensação de caminhos dinâmicos, edição de subcaminhos e muito mais.

Desenvolvedores

Independência de resolução e reusabilidade

Para exposição de altas densidades como telas de retina e dispositivos móveis, a necessidade de arquivos de alta resolução "@2x" se vão. Com as meta tags apropriadas e com as dimensões dos arquivos especificados em arquivos CSS, um desenvolvedor pode ter controle completo quando for redimensionar os arquivos, sem a necessidade solicitar para o designer as variações do mesmo arquivo.

Há alguns fatos emocionantes em ter um único arquivo, tal como: company-logo.svg, pois pode ser usado em vários locais da interface de usuário, com as dimensões sendo controladas pelo CSS ou por atributos de width e height, e como resultado a mesma aparência limpa como cristal independente de como será escalado (ou rotacionado).

Animação

A animação de SVGs com CSS3 mantém a nitidez e clareza ao longo de toda duração da animação. Alguns exemplos são apresentados a seguir, mas note que a baixa quantidade de frames da animações gif não justifica a aceleração suave da GPU na finalização dos efeitos.

 

Para ver uma demostração ao vivo, visite a página da www.adzuna.co.uk e mantenha o foco nos campos de textos ou clique em nos links "more" da lista de botões.

Mas isso é apenas o inicio. A sintaxe XML estruturada do SVG permite que um desenvolvedor possa programaticamente selecionar e animar elementos individuais de um arquivo SVG para criar scripts de animações, banners, propagandas, etc. O CSS-Tricks tem um excelente tutorial passo a passo para criar um banner animado no formato SVG e mostra como quando colocado em linha os elementos individuais de uma imagem SVG podem ser manipulados com CSS para seguir um determinado script, resultando em um banner animado similar aos que são usados na web com o Flash da Adobe que já foi um padrão da industria para propagandas animadas.

Interatividade

O potencial do SVG de substituir o Flash da Adobe não para com as animações. O conteúdo do SVG pode ser interativo, com eventos como: click, mousedown, mouseup (e alguns outros interessantes como SVGZoom / SVGResize) disponíveis para que o desenvolvedor programaticamente interaja usando JavaScript.

Isso abre uma lista de possibilidades como infográficos interativos e soluções gráfica para empresas.

Indo além, o desenvolvedor pode usar bibliotecas auxiliares que facilitam o desenho, manipulação e interatividade, algumas sugestões são: RaphaelJS, D3.js e Snap.svg. Com bibliotecas como essas, animação complexas e apresentações iterativas que previamente eram feitas apenas em Flash agora são possíveis, com diversos de exemplos disponíveis para inspiração, como: a estrutura de árvore customizada do NY Times para analise política das campanhas do Obama e Romney, Gráficos hamiltoniano, Gráficos orientado por potência, mapas com zoom interativos do Censo Argentino de 2001-2010 e diversos outros.

Uso em linha

Voltando aos detalhes da implementação. As duas abordagens padrões para usar os arquivos de imagens em projetos web são realizados pela tag <img> e como imagem de background em elementos (geralmente a nível de blocos). Como o SVG é um XML, uma terceira possibilidade disponível para o desenvolvedor é o uso em linha (inline).

O código SVG pode ser colocado diretamente no HTML. Os navegadores antigos simplesmente ignoram ele, os navegadores recentes irão renderizar como um recurso vetorial. Os arquivos agora são "alcançáveis" pelo CSS (#wa_i) e no Javascript (document.getElementById('wa_i')).

Com o HTML5, o elemento <svg> pode ser colocado diretamente no código HTML das páginas. O beneficio aqui é que o elemento <svg> bem como qualquer elemento filho pode ser controlado pelo CSS.

Independentemente do tamanho e posição, cores de preenchimento e traço também podem ser manipulados, e mesmo animados. Além disso, certos atributos somente do SVG (tal como: stroke-dasharray e stroke-dashoffset) podem ser manipulados a partir de um arquivo CSS resultando em diversas possibilidades interessantes para animações como os efeitos de animações de linhas.

Mais formas de "sprite"

Com diversos arquivos, uma abordagem de otimização clássica é a redução de requisições HTTP combinando diversas imagens em um simples "sprite" (geralmente um PNG) e usa as propriedades de background do CSS para estilizar diversos elementos HTML com o mesmo sprite.

Com os arquivos SVG, duas possibilidades extras que são interessantes agora estão disponíveis aos desenvolvedores:

  1. Abordagem de sprite clássica
    Um recurso SVG com dimensões fixadas pode conter múltiplos sub elementos, colocados em coordenadas especificas. O desenvolvedor usa os arquivos como imagens de background e reposiciona para apresentá-los conforme a necessidade.
  2. Abordagem de agrupamento em linha
    Com a abordagem em linha, a habilidade para controlar e apresentar os sub elementos como CSS permite que o desenvolvedor possa criar um SVG como um "conjunto" de arquivos, no qual cada grupo tem um elemento tal como um ícone. Os IDs podem ser atribuídos para grupos individualmente e pode mudar as propriedades de apresentação de cada grupo, os desenvolvedores escolhem o que ocultar e o que apresentar. Essa técnica funciona muito bem com elementos de interface que tem as mesmas dimensões, tal como os ícones da interface de usuário.
  3. Empacotamento como fonte de ícone
    Os desenvolvedores também tem a opção de "empacotar" diversos arquivos SVGs juntos em uma fonte de ícone. O suporte dos navegadores é excelente (mesmo no IE6) e os mecanismos de subpixels dos navegadores modernos fazem com que mesmo os menores tamanhos fiquem constantes e limpos como cristal. Mesmo nos melhores, há múltiplos ícones online de geradores de fontes disponíveis que simplificam o processo de empacotamento.

Comparando a versão dos mesmos arquivos

O formato SVG, por sua virtude de ser essencialmente um arquivo texto, presenteia o desenvolvedor com a interessante possibilidade de não apenas comparar os arquivos visualmente, mas também verifica as diferenças dos arquivos, assim conhecendo quais partes do SVG foram modificados.

No caso de arquivos SVG grandes e complexos, tal como: infográficos, a comparação de teste é ótima para entender quais partes do recurso foram modificadas na nova versão.

Outras leituras

Para os desenvolvedores, recomendo o Compedium of SVG Information do Chris Coyers. É uma grande lista de links para arquivos SVG divididos em sessões lógicas o resumo é um ponto inicial definitivo para qualquer pessoa interessada em SVG.

Para designers, a apresentação "Leaving Pixels Behind" de Todd Parkers é a melhor introdução possível, cheio de gifs animados apresentando o fluxo de trabalho com SVG no Illustrator.

Suportando os antigos navegadores

No momento da escrita desse artigo, o Internet Explorer 8 ainda precisa ser tratado pelos desenvolvedores. Quando essa necessidade é combinada com o fato dos navegadores Android pre-v3 que não suportam SVG, uma solução alternativa precisa ser implementada.

Para os desenvolvedores, o Modernizr é a ferramenta escolhida. Incluir as bibliotecas do Modernizr como <script> externo no <head> de qualquer projeto web adicionará as classes apropriadas nos elementos <html> para dizer para o documento carregar a página. Em seguida, é necessário adicionar algumas definições extras aos estilos CSS que atualizam as imagens SVG em background com formatos antigos, ou mesmo no caso dos SVGs em linha ou colocados em tags <img>, assim usando tags "auxiliares" que contém soluções alternativas e que são ocultadas por padrão.

O desafio aqui é não ter que pedir para o designer ter que exportar outros formatos de recurso uma vez que esses navegadores invalidam essa opção de exportar apenas um recurso SVG.

Felizmente, as ferramentas de automatização como o Grunt e especificamente os Grunticon do Filament Group estão aqui para ajudar. Em resumo, o Grunticon recebem como entrada as pastas de arquivos SVG e como saída tem uma lista de arquivos PNG junto com arquivos CSS que referenciam essas imagens PNG. Para os gurus da linha de comando, o Inkscape pode ser usado através do shell script para também converter os arquivos SVG para qualquer formato.

Resumo

As vantagens de usar vetores gráficos na web são muito maiores que as desvantagens. Com suporte excelente dos navegadores e soluções automatizadas para funcionar nos navegadores antigos. O autor acredita que o futuro da UI com vetores gráficos independente de resolução é a melhor maneira de seguir adiante.

Sobre o autor

Angelos Chaidas atualmente trabalha como desenvolvedor frontend sênior na Adzuna, uma engine de pesquisa de vagas de emprego internacional. Ele começou sua carreira em 2000 como designer e desenvolvedor PHP, mas focou em desenvolvimento frontend e JavaScript nos últimos 8 anos. Ele ama design UI e UX de aplicativos móveis, apaixonado por otimização web e palestra em eventos locais sobre JavaScript. Ele pode ser encontrado no Twitter como @chaidas.

A plataforma Web percorreu um longo caminho desde que o HTML5 se tornou popular e as pessoas começaram a olhar o JavaScript como uma linguagem que é capaz de construir aplicações complexas. Muitas APIs surgiram e existe conteúdo abundante sobre como os navegadores podem tratar todas elas.

Essa série específica de artigos irá um passo além e se concentra em como essas tecnologias podem ser usadas na prática, não somente para construir demonstrações ou protótipos, mas como os profissionais tem usado elas em produção. Nessa serie de artigos pós HTML5, vamos além do modismo e mostraremos detalhes práticos dos especialistas sobre o que realmente funcionou com eles. Também abordaremos tecnologias (como AngularJS) que vão um passo além e definem o futuro de como os padrões e desenvolvimento web irão evoluir.

Este artigo do InfoQ é parte da serie "Próxima geração do HTML5 e JavaScript". Você pode assinar para receber notificações via RSS.

Avalie esse artigo

Relevância
Estilo/Redação

Conteúdo educacional

BT