Tutoriais

SVG – Como criar mapas responsivos

Renove o tradicional mapa de imagens com SVG para criar soluções responsivas com efeitos de transição

Os mapas de imagem têm uma longa história na web e desfrutam de grande popularidade desde a introdução do HTML. O uso desse tipo de navegação visual foi reduzido nos últimos anos principalmente porque os “hotspots” eram definidos em pixels. Isso tornava a criação dos mapas uma tarefa difícil e tediosa, e o resultado do processo não era responsivo: se a imagem fosse redimensionada, os links associados não a acompanhavam.

Além disso, a experiência de navegação algo próximo à adivinhação, e tal características tornou os mapas de imagem tradicionais inapropriados para a navegação em dispositivos móveis. Mesmo assim, os mapas ainda são ótimas fontes de ideias interessantes de navegação, especialmente para diagramas e localizações geográficas. Basta critatividade, imaginação e o poder do SVG para criar mapas incríveis.

Depois de saber todos os detalhes na matéria publicada da edição 163, agora é a hora de baixar os arquivos e ver com os seus próprios olhos!

Comente