Opinião. 7 Mar 2014

SVG no Responsive Web Design

Nos tempos que correm quando se cria um site responsive é também necessário que os ícones assumam diferentes versões de acordo com o tamanho em que são apresentados. Desta maneira assegura-se a legibilidade dos mesmos em diferentes tamanhos.

Atualmente uma página web pode ser visualizada das mais variadas formas. Longe vão os tempos em que uma empresa responsável pelo desenvolvimento de um site se podia dar ao luxo de aplicar mensagens no rodapé com o texto "para visualizar este site corretamente aconselhamos o uso do browser X com a resolução Y". Diferentes dispositivos, browsers, sistemas operativos, densidades ou resoluções de ecrã afetam a legibilidade de vários tipos de elementos de uma página. Sobretudo ícones.

O principal cuidado a ter ao desenhar um ícone é assegurar que ele é percebido. Por mais óbvia que pareça esta premissa, algumas vezes tal não é conseguido, sendo sacrificada a legibilidade pela necessidade de se querer obter uma estética original e refinada.

Infelizmente legibilidade e estética nem sempre andam de mãos dadas. Aquando do processo de design, o equilíbrio entre as duas propriedades é garantido para uma determinada dimensão do ícone, que se define como a ideal para o apresentar. Muito dificilmente esse equilíbrio se mantém nas várias dimensões que o ícone pode assumir. Um ícone de grandes dimensões poderá apresentar um nível de detalhe que não será percetível numa versão mais reduzida do mesmo, criando ruído.

Estas são questões de vital importância quando se procura um design responsive sem falhas, em que é necessário garantir que o conjunto de ícones é legível e bem desenhado num variado leque de dimensões. Para tal é fundamental apresentar diferentes versões para diferentes tamanhos de um mesmo ícone. Até ao momento a forma mais popular de garantir este resultado passa por incluir ícones em fontes de texto em formato vetorial. Através de media queries, dá-se às fontes/ícones tamanhos diferentes de acordo com a largura do ecrã em que se encontram. A apresentação do ícone fica dependente da largura do ecrã e não necessariamente da largura do elemento em si. Esta abordagem poderá não ser a maneira mais precisa e limpa de lidar com o problema. Por exemplo, num intervalo de dimensões de ecrã em que a disposição de elementos é igual, o tamanho dos ícones varia (o tamanho é proporcional à largura do ecrã) podendo a sua legibilidade estar em causa já que ao contrário do seu tamanho, a forma mantém-se igual. Além disso torna-se mais difícil fazer com que o mesmo ícone assuma diferentes versões consoante o tamanho que assume: é necessário ter em conta a largura do ecrã onde é apresentado, e posteriormente mudar o tipo de fonte do caráter que representa o ícone, ou então o próprio caráter. Desta forma o elemento torna-se mais dependente de outros estilos, propriedades e tecnologias como o Javascript.

Uma outra forma de garantir a apresentação de diferentes versões do ícone dependendo do tamanho, e que tem vindo a ser melhorada nos últimos tempos, é considerar o tamanho do elemento que representa o ícone e não propriamente a largura do ecrã, variando de acordo com os SVG breakpoints (pontos de quebra) definidos. SVG (Scalable Vector Graphics) é um formato utilizado para representar gráficos e que pode ser incluído em páginas HTML. O formato guarda em linguagem XML informação acerca dos vetores utilizados, fornecendo gráficos que não perdem qualidade ao serem ampliados. O formato já é antigo, mas o que é inovador é utilizá-lo com pontos-de-quebra, permitindo apresentar diferentes versões do mesmo elemento dependendo do seu tamanho. Garante-se assim a independência do elemento em relação a outras propriedades e estilos globais.

Atualmente o SVG não é uma solução inteiramente compatível com todos os browsers, mas é certo que com o passar dos tempos essa incompatibilidade diminuirá. Este é mais um passo no sentido de tornar as aplicações web menos dependentes da resolução de ecrã em que são apresentados. Ao diminuir essa dependência torna-se mais rápido e simples o desenvolvimento das aplicações, já que a ideia é cada elemento adaptar-se ao dispositivo onde é apresentado, de acordo com as suas propriedades, ao invés de estarem dependentes das classes associadas a uma determinada resolução.

Tony Oliveira