Screencasts de vídeo 2025, Janeiro

Obrigado por assistir a todos, isso significa tudo para mim e para este site. Esta postagem do blog é uma lista enorme de recursos para tudo o que abordamos nesta série "

Quando você usa inline, todos os elementos estão no DOM, assim como s e s e qualquer outro elemento HTML. Se você tem SVG como: e tem: var rect = "

Neste screencast, examinamos o artigo de Léonie Watson sobre SVG acessível e essencialmente o examinamos ponto a ponto. Eu gosto disso, o primeiro ponto "

Passamos muito tempo falando sobre o uso de inline e do elemento. Você pode construir um sistema de ícones repleto de vantagens. Você pode criar "

Há muito que você pode fazer com SVG sem qualquer software. Supondo que você tenha uma boa fonte de imagens SVG online, você pode usá-las diretamente. Mas"

JavaScript é a última das maneiras que abordaremos na animação de SVG. Vimos CSS, que é ótimo e muito confortável, mas não pode fazer vários SVG "

O conceito de recorte e mascaramento é bastante simples. Oculte certas partes dos elementos e mostre outras. A diferença real entre eles é muito simples "

Talvez você já tenha ouvido falar de filtros CSS? Você pode aplicá-los a qualquer elemento do CSS, como: .apply-css-filter (-webkit-filter: grayscale (0,5); filter: "

Provavelmente não há um caso de uso tremendamente grande para isso, além do óbvio: você precisa de um gráfico raster, entre outras coisas, em um design SVG maior. "

Pode chegar um dia em que você gostaria que um gráfico que você tinha fosse SVG, mas você só o tem em formato raster, como GIF, JPG.webp ou PNG. Neste vídeo, vemos um exemplo "

Uma pequena técnica popular de animação SVG é o desenho de caminhos. Se você não consegue imaginar, aqui está uma coleção de um zilhão de exemplos que criei. Essencialmente, o "

Existe um elemento em SVG. Nenhuma grande surpresa aqui: é para inserir texto no SVG. Não são contornos de formas de letras (embora você também possa fazer isso), mas "

Isso é um pouco esotérico, eu só precisava fazer isso sozinha uma vez e achei confuso, então pensei em fazer um vídeo inteiro sobre isso. A coisa é,"

O vídeo foi removido neste. Vou filmar novamente algum dia em breve. Se você está lendo isso e eu ainda não li, sinta-se à vontade para entrar em contato comigo e me incomodar "

Esta dica se aplica apenas se você tiver Adobe Illustrator CC (Creative Cloud). Confirmei que funciona nisso, ou mesmo no mais recente CC 2014. É o mais simples possível "

Mesmo que a animação de SVG com CSS possa ser mais confortável para o front-end médio, o SVG tem outra maneira de fazer a animação embutida no SVG "

Quando você usa o SVG embutido, todo o código SVG está correto no HTML e, portanto, no DOM. Você pode estilizá-los como se fosse um, ou qualquer outro HTML "

Aprendemos que uma limitação do uso para inserir um pouco de SVG é que você não pode escrever seletores CSS compostos que afetam por meio deles. Por exemplo: Isso "

O termo "ferramenta de construção" pode ser assustador. Ele traz à mente ferramentas sofisticadas de linha de comando que requerem configuração e dependências estranhas do sistema que quebram quando você "

O SVG embutido pode ser "estilizado" no sentido de que já tem preenchimentos e traços e outros enfeites no segundo que você o coloca na página. Isso é incrível e totalmente "

Os sites de fotografia de estoque sempre têm uma maneira de filtrar os resultados da pesquisa por "vetor". E lembre-se, não importa o formato que você obtém ao baixar algo "

Aprendemos que as ferramentas de construção são particularmente impressionantes para tarefas como transformar uma pasta cheia de SVGs em um bloco defs SVG. Como sempre acontece em "

Podemos definitivamente ficar um pouco mais nerd com nossas ferramentas de construção. No momento em que postamos isso, o filho do pôster das ferramentas de construção é Grunt. Existem concorrentes, "

Assim que tivermos o que estamos chamando de "bloco defs" de SVG - aquele pedaço de SVG que define todas as coisas que queremos desenhar depois - onde o colocamos? Então"

O elemento é fundamental para toda a ideia de um sistema de ícones SVG embutido. Aprendemos que uma maneira limpa de fazer isso é colocar tudo o que você pretende desenhar depois "

Colocar aquele bloco defs SVG no topo do documento definitivamente funciona. Também tem algumas vantagens, como o fato de que nenhuma solicitação HTTP precisa ser feita, "

SVG tem um elemento muito legal e poderoso chamado. É muito simples no conceito. Ele encontra outro bit de código SVG, referenciado por ID, e o clona sobre "

Abordamos o "inline SVG" - que consiste em inserir a sintaxe SVG diretamente no HTML. Você pode usar o mesmo SVG embutido em outros lugares também, como em um ou "

Lembre-se de que qualquer vetor que você pode inserir em SVG. O software Adobe é ótimo nisso. Pode haver coisas vetoriais em um PDF - basta abrir o PDF e você "

O Projeto Noun é um lugar (muito) fantástico de onde obter SVG. Vamos contar as maneiras que literalmente tudo em SVG e realmente vem dessa maneira Eles são o "