O melhor guia para o SVG

Imagine que você pudesse incorporar uma imagem em uma página da Web, dimensionar essa página para qualquer tamanho e nunca perder a qualidade da imagem. Bem, você pode. É totalmente possível, nós não temos feito isso tanto quanto deveríamos.

Imagens com tamanhos fixos, como arquivos JPG, GIFs e PNGs têm seu lugar na Web, mas sua natureza inerentemente estática entra em conflito com a maneira como a Web está indo. À medida que nos movemos para designs ágeis e fluentes, mais irritante é ter que lidar com imagens que não são fundamentalmente responsivas. É frustrante e inacreditável quando percebo que está se tornando prática recomendada criar e veicular várias versões diferentes de cada imagem em seu site.

Eu percebo que há boas razões técnicas para isso. Vai demorar muito até que alguém crie uma fotografia infinitamente escalável, por exemplo. No entanto, as fotos não são o ideal e o fim das imagens. Os gráficos vetoriais percorreram um longo caminho. Eles estão indo muito longe ainda.

Eles podem ser mais difíceis de adquirir, porque nem todo web designer é um ilustrador. As fotos são abundantes e é fácil encontrar imagens em stock. Os gráficos vetoriais, por outro lado, são geralmente de baixa qualidade, ou talvez você simplesmente não consiga encontrar o caminho certo. Contratar ilustradores é caro.

Mas, como o suporte para gráficos vetoriais cresce on-line, seu uso também aumenta. É hora de todos aprenderem como implementá-los em seus sites e usá-los de forma criativa. Imagens tão responsivas quanto nossos sites são o futuro.

Conheça o arquivo SVG…

O que é SVG e por que você deve usá-lo?

Tudo bem, para os novatos entre nós, o SVG significa Scalable Vector Graphics. Arquivos SVG são coisas bastante simples, em teoria. Eles são apenas arquivos de texto com um monte de XML dentro. Cada informação visual em um arquivo SVG é definida por um código legível, que é então calculado e processado pelo seu navegador, software gráfico, etc.

Isso significa que, embora os arquivos SVG não sejam tão complexos como, por exemplo, uma fotografia formatada como um JPG, eles são infinitamente mais flexíveis. Eles podem ser alterados manualmente em um editor de texto. Eles podem ser alterados por código, como JavaScript e CSS. Eles podem ser comprimidos em tamanhos quase ridiculamente pequenos.

Em outras palavras, elas são especificamente projetadas para serem usadas junto com outras tecnologias da web. Eles são perfeitos para nós.

No final dos anos 90, Macromedia e Microsoft (e outras empresas) introduziram VML e, em seguida, a Adobe (e outras empresas) PGML possíveis soluções para imagens vetoriais em sites para o W3C (e possivelmente como alternativas ao antigo formato PostScript). O W3C disse: “Não, nós vamos fazer o que queremos; mas obrigado pelas ideias! ”O resultado foi o Grupo de Trabalho SVG.

Em setembro de 2001, o SVG 1.0 tornou-se uma recomendação oficial do W3C, e o resto é história. Tipo de. O Internet Explorer ficou para trás ao adotar o formato SVG, surpreendendo ninguém. Desde então, houve atualizações voltadas para dispositivos móveis e mais com esclarecimentos.

Mesmo agora, o SVG Working Group está criando o SVG 2, que incluirá mais integração de integração com coisas como HTML5, CSS e o formato de fonte WOFF.

Tem suporte

A única versão do Internet Explorer com a qual você precisa se preocupar agora é o IE8. É isso aí. Todos os outros têm suporte a SVG mais ou menos completo. Sim, você pode encontrar bugs de vez em quando, mesmo nos navegadores “bons”, mas ainda vale a pena. Não apenas o trabalho em torno deles manterá suas habilidades de resolução de problemas mais nítidas, mas quanto mais usarmos essa tecnologia, mais os desenvolvedores do navegador a suportarão.

Confira caniuse.com para uma análise mais aprofundada do que funciona e do que não funciona em quais navegadores.

Tudo é responsivo ... ou deveria ser

A tecnologia da Internet foi muito além dos sites estáticos que conhecíamos. Chegou a hora de nossas imagens serem atualizadas, claras e simples. Quando você precisar criar um ícone, use SVG. Quando você precisar usar uma ilustração, vá para SVG se puder. Se você quiser um plano de fundo abstrato, mas ainda assim simples, use o SVG.

Eu não sou fã da tecnologia de tela de retina, especialmente porque eu não tenho uma. Não é ciúme. Bem, não é só ciúme. O simples fato é que as telas Retina foram feitas e tornaram as imagens muito mais complicadas. O SVG, sendo infinitamente escalável, pode ajudar a minimizar o problema.

Acessibilidade

Os usuários com deficiência visual geralmente navegam na Web com tudo ampliado um pouco. Quando imagens regulares são ampliadas, elas perdem qualidade. O SVG não fará isso, então por que não aproveitar isso para dar aos deficientes visuais uma experiência de qualidade?

Pode ajudar a preparar seu website para o futuro

A tecnologia está sempre mudando. O que está aqui hoje pode demorar um pouco, mas o SVG provavelmente estará por aí por enquanto. Enquanto o W3C definir os padrões globais do setor, parece que o SVG continuará a ser o padrão de fato para gráficos vetoriais no navegador. Use-o agora e seus sites ficarão prontos por um bom tempo.

Tutoriais e instruções do SVG

Então você está convencido. O SVG é legal, é o futuro, é hora de aprender. Felizmente para todos, esta é a Internet. Você só sabe que as pessoas gastaram horas preciosas e horas criando material de treinamento gratuito para quem quiser. As pessoas que fazem esse tipo de coisa são as pessoas que tornam a Internet incrível.

Então, é claro, nós passamos horas examinando os vários tutoriais para encontrar os melhores. Você pode nos agradecer depois. Por enquanto, há leitura a ser feita!

Nota: lembre-se de que os arquivos SVG são todos de código XML, portanto, muitos desses tutoriais são focados no desenvolvedor ou têm muito código neles. Incluímos dois tutoriais focados no básico e em usos criativos específicos para o SVG, por isso, não pule esta parte.

• Usando o SVG: Chris Coyier tem escrito tutoriais CSS e HTML fáceis de entender por anos no css-tricks.com. Dele primer no SVG não é diferente. Eu vou estar incluindo links para muitas explicações básicas e tutoriais, mas é aí que eu começaria. Este tutorial inclui instruções básicas para usuários do Adobe Illustrator.
• Como começar com o SVG: eu seria negligente se não incluísse Contribuição própria do WDD para a educação SVG. A sempre fantástica Sara Vieira abrange a criação de gráficos, a exportação, a limpeza do código, a transferência de atributos de apresentação para arquivos CSS e muito mais.
• Independência de resolução com o SVG: Se é relacionado à web, a revista Smashing provavelmente tem um artigo sobre isso. Eles cobrem o noções básicas do formato SVG com seu estilo habitual e atenção aos detalhes.
• Gráficos vetoriais escalonáveis ​​(uma série de artigos): Hongkiat.com é outro recurso para aprendizado relacionado à qualidade e à Web de gráficos. Em vez de apenas fornecer um artigo longo, eles publicaram uma série inteira deles por Thoriq Firdaus. Às vezes, o inglês é um pouco deficiente, mas as instruções ainda são claras e fáceis de entender.
• Sara Soueidan: estilizando e animando gráficos vetoriais escaláveis ​​com CSS: um vídeo de uma apresentação dado no CSSconf EU 2014. Nele, Sara Soueidan fornece uma série de dicas, truques e até mesmo alguns truques para aplicar estilos e animações ao SVG na web. É meia hora de duração, então fique confortável e mantenha algo para fazer anotações à mão. Vale completamente o seu tempo.
• Exportando SVG para a Web com o Adobe Illustrator CC: os usuários do Adobe Illustrator devem Veja isso. Um dos blogs da própria Adobe fornece instruções detalhadas e muito detalhadas sobre como exportar arquivos SVG para a Web. Saiba como otimizá-los até o menor tamanho de arquivo para a Web.
• SVGBasics: este site inteiro é dedicado a ensinar as pessoas como criar gráficos SVG a partir do zero com XML. Eu recomendo isso para quem está lidando com o back-end real - ou mesmo front-end - de qualquer site. Saber como o código funciona pode ajudar muito a resolver problemas rapidamente.
• Tutorial SVG por Jakob Jenkov: Outro desenvolvedor-centric conjunto de tutoriais, Aqui. A grande diferença? O autor incluiu versões em vídeo de cada seção. Se você aprende melhor tendo visuais e áudio para acompanhar suas lições, esse é um bom lugar para começar.
• A introdução simples à animação SVG: O título diz tudo. David Walsh explica como configurar seu Elementos SVG para animação, quais atributos usar para diferentes elementos, quais bibliotecas usar e mais. Não é um guia completo, mas apresentará os conceitos básicos necessários para iniciar a animação.
• Uma introdução à animação SVG: Este tutorial entra um pouco mais detalhadamente sobre como exatamente animar seus objetos SVG. Além disso, ele aborda alguns problemas comuns que você pode encontrar ao animar, então vale a pena ler.
• Como exportar vários ícones para arquivos SVG do Adobe Illustrator: Criando um conjunto de ícones SVG no Illustrator? Mantendo-os todos em um arquivo do Illustrator? Exportar todos eles para seus arquivos separados em um único clique.
• Animar texto com caminhos SVG: faz exatamente o que diz no título. Coloque sua animação em talvez usá-lo em um logotipo. Certamente parece legal o suficiente …
• Ícones SVG animados com CSS3 e JavaScript: Um dos maiores usos do SVG é para ícones, e com boas razões. Crie um arquivo, use-o em qualquer lugar do seu site ou aplicativo, em qualquer tamanho. O que mais você poderia pedir? Este tutorial mostra como animar esses ícones no foco.
• Criando um Infográfico SVG Escalonável: Infográficos são uma das maneiras favoritas da Internet para consumir fatos nos dias de hoje. Por que não torná-los infinitamente redimensionáveis? Jogue alguma animação, e você poderia muito bem explodir algumas mentes.
• Fazendo um botão Burger SVG HTML: Diga o que quiser sobre o botão de hambúrguer, provavelmente não vai a lugar nenhum. Você também pode use SVG e animação para torná-lo o botão de hambúrguer mais brilhante e mais legal possível. Este cobre como animar traçados e traços para fazer um botão literalmente se transformar em outro, então dê uma olhada.
• Exemplos e Tutoriais do Snap.svg: Este é um guia para usar a biblioteca JavaScript Snap.svg (consulte a seção "Ferramentas" abaixo). Ele foi projetado para ajudá-lo a começar a criar elementos SVG no JS e a animá-los, tornando-os interativos e assim por diante.
• Introdução ao Raphaël.js: Raphaël.js é uma das maiores bibliotecas JavaScript relacionadas a SVG, e Este artigo ensina como usá-lo. (Novamente, veja a seção Ferramentas abaixo.)
• Ícone SVG Animado: As pessoas parecem gostar muito de ícones animados, então você também pode aprender todas as abordagens para torná-los o que puder. Aqui vemos a biblioteca Snap.svg em ação mais uma vez, conforme o autor cria e, em seguida, anima o botão "play" de um reprodutor de mídia.
• Clipping em CSS e SVG - A propriedade e elemento do caminho do clipe: Aqui está um artigo longo agradável sobre como usar o recorte de SVG para criar imagens dentro de formas e imagens dentro de um texto enorme. Você pode considerar usá-lo para fazer grandes manchetes de fantasia que são SEO amigável porque bots de mecanismo de pesquisa podem lê-los.
• Tornando os SVGs responsivos com CSS: Embora os arquivos SVG sejam infinitamente redimensionáveis, os métodos usados ​​para colocá-los em uma página da Web podem, às vezes, causar problemas. Este tutorial a partir de codrops explica apenas como corrigir os vários problemas que você pode encontrar.
• Shape Hover Effect Com SVG: Crie uma aparência suave e elegante efeito de foco animado para pré-visualizações de imagens. ( Confira a demonstração. )
• Um Primer SVG para os navegadores de hoje pelo W3C: Não é o último, e certamente não menos importante, temos um recurso fornecido pelas pessoas que criaram todo o formato SVG em primeiro lugar: o W3C. Não é um tutorial básico ou uma introdução. De acordo com o prefácio, ele foi criado para programadores profissionais, designers gráficos com “forte inclinação técnica” e outros que não se importam de ir ao âmago da questão.
• SVG Tutorial by MDN: Como SVGBasics, este é um bom extenso conjunto de tutoriais, fornecidos pela Mozilla Developer Network. Por mais extensivo que seja, o tutorial em si é considerado “em desenvolvimento”. Por exemplo, isso pode ser visto atualmente na página "Filtros", que está vazia. De acordo com a página em si, o tutorial está em um estágio inicial de desenvolvimento. Se você é capaz, por favor, ajude por lascar e escrever um parágrafo ou dois. Pontos extras para escrever uma página inteira.

Ferramentas SVG

Uma das muitas vantagens da natureza aberta do SVG é que qualquer um pode criar software para ele. Não há restrições de licenciamento ou taxas a pagar, apenas um padrão aberto para as pessoas usarem. Como você pode esperar, muitos desenvolvedores fizeram exatamente isso.

Ferramentas para criar e usar o formato SVG são abundantes. Eles variam de grandes pacotes de software, que incluem a opção de exportar SVG como uma reflexão tardia, para aplicativos de desenho vetorial que usam SVG como seu formato principal e muito mais.

Uma rápida pesquisa no Google por "ferramentas SVG" retorna "Cerca de 37.000.000 de resultados", então você sabe que há muito por aí.

Onde, então, você deveria começar?

Aplicativos Premium

Os grandes nomes na criação de gráficos suportam SVG. Adobe Illustrator,Corel Draw, até vários produtos de Xara - sim, o Xara ainda é uma coisa - todos eles podem importar, editar e salvar arquivos no formato. (O Illustrator é conhecido por colocar algumas coisas estranhas em arquivos SVG, portanto, é necessário ter cuidado com as configurações de exportação.)

Inkscape

Se você ainda não estiver usando um pacote de gráficos vetoriais, Inkscape é um lugar fantástico para começar. Criado em 2003 como uma bifurcação de outro projeto de código aberto chamado Sodipodi (que foi baseado em um outro projeto OSS), o Inkscape tornou-se o padrão para software de gráficos vetoriais gratuito e multiplataforma. Não é tão cheio de recursos como o Adobe Illustrator, mas é mais do que suficiente para a maioria dos projetos vetoriais.

Serif DrawPlus Starter Edition

Serif é uma empresa que faz uma boa criação de gráficos e software de editoração eletrônica. Todas as suas principais ofertas de software vêm com "Starter Editions" gratuitas, e seu aplicativo de desenho vetorial não é exceção.

Não deixe o "Starter Edition" te enganar, no entanto. Pode não ter tudo o que a versão pro faz, mas pode fazer o trabalho na maioria dos casos. A menos que você seja um ilustrador profissional, este aplicativo pode atender às suas necessidades, desde que você esteja no Windows. Infelizmente, não é multi-plataforma. Além disso, o registro é necessário para o download.

Karbon

Parte da suíte de escritório Calligra, que é principalmente para Linux, Karbon é um editor de gráficos vetoriais com recursos completos. Tem todas as ferramentas básicas e algumas outras coisas. A instalação no Mac e no Windows é difícil no momento, embora não impossível.

Design de impressão

O nome soa como um pacote de software dos anos 90, eu sei, mas na verdade é bem novo. Na verdade, é o sucessor do antigo aplicativo de ilustração sK1, que foi descontinuado. Design de impressão está atualmente no estágio "preview" e tem as versões Linux e Windows. Ainda não está pronto para uso em produção, mas é um projeto que merece ser observado.

SVG-edit

O nome é um pouco on-the-nose, talvez, mas o software é mais do que capaz. SVG-edit Baseia-se inteiramente em tecnologias da Web, especificamente HTML5, JavaScript e CSS. Isso significa que não há funcionalidade no lado do servidor. Além disso, é o Open Source, o que significa que você pode baixá-lo, colocá-lo em seu próprio servidor ou até mesmo usá-lo na área de trabalho.

Tem um lista de recursos tempo suficiente para deixar muitos aplicativos de desktop com inveja e correr mais rápido do que a maioria deles, então dê um giro.

Janvas

Janvas é o único aplicativo baseado na Web nesta lista que não é estritamente gratuito. Há um período de teste de trinta dias, após o qual uma assinatura custa 26 euros por ano. Se nenhum dos outros editores SVG baseados na web o fizer feliz, você pode realmente considerá-lo.

As ferramentas de desenho são avançadas e familiares o suficiente, cada variável é editável na barra lateral e você pode salvar seus documentos no Google Drive. Você pode criar modelos, colaborar em documentos de desenho e até mesmo incluir arquivos CSS e JS para interagir com os gráficos.

Tudo somado, é uma oferta sólida.

Mondrian

Pequeno. Lustroso. Simples. Mondrian é ainda outro Código aberto oferecendo, e é muito menor do que a maioria. Não tem sequer uma ferramenta de texto… mas faz desenhos simples muito bem. Você pode abrir arquivos do disco rígido ou de uma URL, pegar código de incorporação para o seu site ou apenas salvar seu desenho como SVG ou PNG. Pode não ser tão avançado quanto outros aplicativos, mas é agradável de usar, e a ferramenta caneta parece natural.

Desenhe SVG

Desenhe SVG é outro editor SVG baseado na web com todos os recursos que você deve precisar. Seu ponto mais forte parece ser a grande velocidade com a qual ele carrega e desenha as coisas. Infelizmente, no entanto, a interface do usuário está seriamente falha. Ainda assim, está lá e funciona, caso você precise.

Bibliotecas SVG

Os desenvolvedores se alegram! Nós temos alguns links aqui para você também. Afinal, o SVG não é apenas outro formato gráfico. É código. É um código que pode ser vinculado ou incorporado. Pode ser interagido com e alterado na mosca. Com matemática!

Snap.svg

Snap é uma biblioteca JS para gerar e interagir com o SVG. Ele é projetado para navegadores modernos. Sim, isso significa que ele só suporta o IE9 +… mas se navegadores mais antigos não são sua preocupação, vá em frente.

Raphaël

Raphaël, ao contrário do Snap, é compatível com navegadores mais antigos. Na verdade, ele pode funcionar com o IE6 +, o Safari 3+ e o Chrome 5+. Se você está desenvolvendo algo para um sistema corporativo onde os usuários podem estar em máquinas mais antigas, por exemplo, o Raphaël pode ser sua melhor aposta.

jQuery SVG

Como SVG e jQuery? Eu não estou realmente surpreso. Talvez jQuery tenha perdido um pouco da atenção que já teve, mas ainda é uma biblioteca para muitos de nós.

jQuery SVG, então, é possivelmente o plugin que você está procurando. Tem funções para animações, gráficos e até extensões. É isso mesmo, extensões para um plugin. O suporte ao navegador é o IE9 +, mas versões mais antigas do IE podem ser usadas com os plug-ins de navegador apropriados instalados.

Eu não dependeria de usuários com esses plugins, no entanto.

SVGMagic

SVGMagic é uma solução drop-in, baseada em jQuery, para navegadores mais antigos (IE 7 e 8). Em vez de criar manualmente as imagens de fallback para cada arquivo SVG que você usa, este plug-in pode gerá-los rapidamente. Ele lida com imagens de fundo bem também.

Como isso acontece? Ele detecta se o navegador do usuário pode ou não lidar com SVG. Se assim for, vai dormir. Caso contrário, ele contata um script PHP do lado do servidor e informa para criar um arquivo PNG das imagens SVG em questão com as dimensões necessárias.

Uma vez concluído, o script PHP envia as URLs para essas imagens de fallback temporário de volta ao plug-in do jQuery, e as URLs padrão são substituídas. Obviamente, isso leva tempo. Por isso, é possível especificar, opcionalmente, uma imagem de espaço reservado para exibição enquanto a conversão ocorre.

Uma ressalva: atualmente, não consegue lidar com muitas imagens de uma só vez. Você não gostaria de usar essa técnica em páginas com mais de alguns arquivos SVG.

SVG.JS

Por fim, aqui está uma opção para os contadores de bytes. SVG.JS pesa apenas 11,8 kbs quando gzipped. Apesar de seu pequeno tamanho, ele suporta um número impressionante de recursos (conforme listado na página do projeto):

• Animações em tamanho, posição, transformações, cor
• Extensão indolor graças à estrutura modular
• Vários plugins úteis disponíveis
• API unificada entre tipos de formas com movimento, tamanho, centro
• Eventos de ligação a elementos
• Suporte total para máscaras de opacidade e traçados de recorte
• Caminhos de texto, até animados
• Grupos de elementos e conjuntos
• Gradientes dinâmicos

Leia o documentação para mais informações.

Stock SVG

Nem todo mundo é um ilustrador. Pelo menos, eu certamente nunca fui bom nisso. Assim, as ilustrações de ações se tornam um recurso inestimável. Pode ser difícil encontrar coisas boas, no entanto. O que não se parece com o clipart da Microsoft geralmente é limitado no escopo, ou caro.

Não perca a esperança, no entanto. Há muita coisa por aí que é de boa qualidade. Se não atender perfeitamente às suas necessidades, bem, é arte vetorial. As chances são de que ele pode ser ajustado para atender às suas necessidades se você tiver um conhecimento básico de software de gráficos vetoriais.

O SVG pode fazer mais do que apenas ilustrações de estoque, no entanto. Você também pode criar padrões, grandes planos de fundo extravagantes que não consomem largura de banda e muito mais. Vamos dar uma olhada no que as pessoas fizeram para o resto de nós:

SVG Clipart em openclipart.com

O SVG, como formato aberto, tem muitos entusiastas do código aberto como fãs. Como resultado, é um dos principais formatos usados ​​no que pode ser a maior coleção de clip art gratuito lá fora.

E muito disso é clipart-ish. E muito do trabalho amador. Existem alguns gráficos de qualidade, se você olhar. Ei, é grátis.

Estoque SVG

Estoque SVG é um site pequeno, com uma coleção relativamente pequena, mas excelente. São principalmente ícones e modelos de dispositivos, mas são todos de alta qualidade. Se você precisar de uma dessas duas coisas, comece por aqui.

Recursos do SVG em deviantart.com

Ah DeviantArt, essa comunidade gigante ainda está forte. Vá para a categoria de imagens e procure por SVG (ou clique no link acima). Mais uma vez, a qualidade vai variar, mas há coisas boas lá se você tiver tempo para olhar.

Galeria de padrões SVG

Uma pequena galeria cheia de Padrões baseados em SVG. Ele foi projetado mais como uma vitrine, mas os arquivos de origem estão todos lá para sua conveniência.

Padrões SVG de svgeneration.com

svgeneration.com inclui muitos padrões SVG para seu uso. O site vem com opções de edição para cada padrão, e você pode editar o código diretamente no site para ver suas alterações em ação. Não só isso é um ótimo recurso para padrões pré-fabricados, mas você pode descobrir muito sobre como eles são feitos em primeiro lugar.

Clipart SVG

A arte em esse site é um estilo de desenho animado distintamente antiquado. Isso, francamente, não será o que todo mundo está procurando, mas está lá para aqueles que querem aquela sensação clássica de suas ilustrações.

Estúdio SVG

Estúdio SVG está oferecendo milhares de ilustrações com um toque distintamente moderno. Você pode comprá-los em pequenos subconjuntos ou baixar o catálogo inteiro de uma só vez. Isso vai custar 500 USD, o que, para 3000 ilustrações, não é tão ruim assim.

SVG nos sites de estoque maiores

Eu não posso dizer muito sobre a arte oferecida em cada site, porque varia muito pelo colaborador sem nenhum estilo geral. Os maiores nomes são istockphoto.com,shutterstock.com,bigstockphoto.com, e canstockphoto.com.

Inspiração SVG

Podemos ler todas as apresentações que queremos e seguir todos os tutoriais que estão por aí. Podemos nos tornar especialistas em todos os aspectos da especificação do SVG, e ainda assim podemos ser incrivelmente chatos com isso. Temos que olhar para todo o potencial de qualquer tecnologia para fazer o maior uso dela.

Muitas vezes é mais fácil falar do que fazer, no entanto. Muitas vezes ajuda ter um ponto de referência, algo incrível de se ver, e nos mostrar exatamente que tipo de coisas incríveis podemos fazer com o que temos. Isso é o que sites como Webcreme fez para web design em geral. Isso é o que CSS Zen Garden, e todas as galerias CSS que vieram depois, fizeram para layouts CSS.

Até o momento, não encontrei nenhum site de galeria dedicado ao que pode ser realizado via SVG combinado com outras tecnologias da Web, e isso pode ajudar. Enquanto isso, aqui está uma demonstração de coisas incríveis que encontramos:

Snap Display Ad

Este exemplo faz parte do Snap.svg coleção no CodePen. Precisa de um exemplo perfeito de como o SVG pode ser usado para revolucionar os anúncios on-line? É isso.

Pense nisso: algumas empresas de publicidade ainda vendem anúncios com base no tamanho do pixel. Isso não faz sentido na era da variação infinita em tamanhos de tela e telas Retina para inicializar. Até chegarmos a um sistema melhor do que os anúncios visuais, o SVG poderia ao menos nos ajudar a fazer com que os anúncios se encaixem na natureza responsiva do design da web.

Veja a caneta Snap Display Ad por CJ Gammon ( @cjgammon ) em CodePen .

Interface de desktop Jtop

A Mozilla Developer Network, uma entidade que eu continuo pesquisando enquanto pesquiso tecnologias da web em geral, também produziu algumas coisas interessantes feitas com o SVG. Por exemplo, eles foram e fizeram uma interface de desktop inteira com base inteiramente em tecnologias da Web, como HTML5, JS, SVG e CSS. É rápido, personalizável e eu quase gostaria que fosse parte de um sistema operacional real.

Um tempo de reflexão

Trazido para nós por ShinyDemos (que é por sua vez trazido para nós pelo povo em Ópera ) Um tempo de reflexão irá literalmente sobrepor um relógio ao longo de um feed ao vivo da sua webcam. Bem, se você der a sua permissão, e você realmente tem uma câmera, de qualquer maneira. Mas o ponto é que isso mostra como as máscaras SVG podem ser sobrepostas em quase tudo.

oblurlay

Através de uma combinação de CSS, SVG e jQuery, oblurlay cria exatamente o que o nome sugere: uma sobreposição embaçada, estilo iOS. É um plugin do jQuery, então a implementação não é difícil, e mostra claramente como os filtros SVG podem ser aplicados a todos os tipos de coisas, não apenas aos objetos SVG em si.

Demos Codrops

O Codrops (mencionado anteriormente na seção de tutoriais) produziu um grande número de demos fascinantes, impressionantes e simplesmente bonitas para mostrar o que o SVG pode fazer. Cada um merece sua própria seção apropriada neste artigo, mas há tantos que eu estou colocando todos eles em um. Se você não olhar para mais nada desta seção de “Inspiração”, olhe para eles. Confira as demonstrações e baixe os arquivos de origem. Então vá agradecer ao pessoal da Codrops. Eles merecem isso.

Nota: nem todos são focados em SVG, mas todos usam gráficos SVG de alguma forma.

Efeitos de carregamento de página : um conjunto de efeitos de carregamento de página de criativos que usam animações SVG com o Snap.svg. A ideia é mostrar uma sobreposição com uma animação de forma interessante enquanto o novo conteúdo é carregado.

Idéias para efeitos de foco sutis : alguma inspiração criativa e subtil do efeito de pairar usando técnicas CSS modernas, incluindo tradução 3D e pseudo-elementos. Eles também usam SVG. Vá conferir o demonstração para o segundo conjunto de efeitos.

Animação de desenho SVG : uma pequena experiência que explora o uso de animações de desenho de linha SVG para preceder a aparência de elementos gráficos ou de website, simulando o carregamento deles.

Efeitos do menu fora da tela : alguma inspiração para efeitos e estilos de menu off-canvas usando transições CSS e animações de caminho SVG.

Inspiração de Estilos de Tooltip : uma pequena coleção de vários estilos de dicas de ferramentas e efeitos para sua inspiração. Usando formas de transformação de CSS, raio de borda e formas de SVG, podemos criar dicas de ferramentas modernas e interessantes.

Inspiração de Estilos de Notificação : algumas ideias e efeitos simples para notificações discretas de sites. Um pequeno script é empregado para mostrar alguns estilos e animações CSS são usadas para os efeitos.

Inspiração para elementos personalizados selecionados : alguma inspiração para estilizar uma versão customizada do elemento select. Existem muitas possibilidades e hoje estamos explorando algumas idéias de como deixar o usuário selecionar uma opção em grande estilo.

Inspiração para estilos de ancoragem inline : alguma inspiração para estilos de âncora inline criativos e modernos e efeitos de hover usando diferentes técnicas como transições de pseudo-elementos e SVGs.

Estilos de Navegação de Seta : alguma inspiração para estilos de navegação de seta e efeitos de foco usando ícones SVG para as setas e transições de CSS e animações para os efeitos.

Efeito slideshow instável : os slides desta apresentação de slides oscilam conforme se movem. O efeito é baseado no Dribbble de Sergey Valiukh e foi feito usando o Snap.svg e metamorfoseia caminhos SVG… Por favor, note que isso é altamente experimental e testado apenas nas versões mais recentes dos navegadores modernos.

Embrulhando-o

O SVG, embora ainda não seja um dos formatos de imagem mais utilizados, está bem documentado, é fortemente suportado e é uma grande parte do futuro da Internet. Se você ainda não estiver usando o processo de design, provavelmente é hora de começar.

Imagem em destaque, imagem vetorial sem emenda via Shutterstock.

• ← 10 plugins WordPress gratuitos para fevereiro de 2015
• 21 ferramentas de colaboração para otimizar seu trabalho em equipe →