SVG ou gráficos vetoriais escalonáveis têm uma grande vantagem sobre os formatos normais de imagem: eles são infinitamente escaláveis, o que significa que não há degradação da qualidade, independentemente de quão grande ou pequena a imagem seja.
No entanto, o SVG não é usado apenas para imagens. Você pode usar filtros SVG para manipular imagens e texto e aplicar efeitos interessantes. Nesta postagem, reunimos os filtros SVG mais interessantes e os tutoriais de filtro SVG que você pode estudar e aplicar aos seus projetos.
Você também pode gostar de: Bibliotecas e ferramentas de filtro de imagem CSS.
Filtros SVG 101
O primeiro tutorial da lista é um excelente material introdutório para filtros SVG. Este tutorial o guia pelo processo de uso de filtros SVG em seus próprios designs e faz parte de uma série maior que se aprofunda nos filtros SVG.
A arte dos filtros SVG
Este artigo da Smashing Magazine investiga profundamente o mundo dos filtros SVG e explica por que você deve usá-los em seus próprios designs. Ele também inclui alguns exemplos básicos de filtros SVG aplicados a vários elementos de texto.
Filtros de texto SVG
Este é outro tutorial que mostra como aplicar filtros SVG ao seu texto. O tutorial o orienta no processo de criação de um filtro SVG e até compartilha uma ferramenta que facilita a criação de filtros SVG.
Sombras de queda SVG
Este pequeno trecho de código rápido permitirá adicionar uma sombra projetada a qualquer objeto da sua página. Ele mostra como o filtro funciona e fornece um código de amostra que você pode modificar ao seu gosto.
Efeitos de desfoque SVG
Semelhante ao exemplo acima, este trecho de código ensina como reproduzir efeitos de desfoque em suas imagens usando filtros SVG. Você pode modificar o código e brincar com suas opções para aprender como ele funciona e depois aplicá-lo aos seus designs.
O efeito pegajoso
Com este tutorial, você aprenderá como criar um efeito legal e exclusivo e aplicá-lo a um menu. Esse filtro SVG certamente fará com que seu projeto se destaque; confira o tutorial e saiba como aplicar esse efeito aos seus designs.
Filtros SVG
Embora não seja um tutorial, este recurso lista todos os elementos necessários para os filtros SVG e serve como um excelente ponto de referência quando você estiver pronto para experimentar com eles em seus próprios designs. A seguir, é apresentada uma lista de referência de vários filtros SVG que podem ser aplicados a texto, imagens e muito mais.
Efeito de desfoque mascarado
Aprenda como criar um efeito de desfoque mascarado interessante neste tutorial. Uma ótima maneira de dar vida a elementos de cabeçalho ou seções de paralaxe em um site.
Filtros SVG práticos
Este é outro tutorial detalhado que fornece uma boa visão geral do que são filtros SVG e como usá-los. Inclui até exemplos práticos que você pode aplicar imediatamente aos seus projetos.
Tutorial de filtro de fonte de luz SVG
Se você deseja aplicar um efeito de iluminação interessante ao seu design, não pule este tutorial. Você aprenderá como aplicar um efeito de iluminação e manipulá-lo usando três efeitos de iluminação diferentes.
conclusão
Os filtros SVG fornecem um conjunto abrangente de filtros que podem adicionar profundidade a qualquer projeto. Além disso, você pode aplicá-los a qualquer elemento DOM usando os tutoriais desta postagem e os filtros SVG principais para seus próprios layouts.
Add comment