Um artigo sobre a renovação de apartamentos , sobre o uso eficiente de recursos gráficos de dispositivos modernos. De relógios inteligentes a televisores na parede.
A história de como inserir imagens repetidas em segundo plano na página, para que todos fiquem bem.
Bem, você está pronto para jogar ..? Então dirigi
Introdutório
Houve uma tarefa para criar uma página do site com uma imagem repetida.
Como vamos decidir?
Primitivo trivial de nível 1
A maneira mais fácil de usar um grande número de tipógrafos é escolher a imagem de fundo de uma só vez (na maioria das vezes o formato png, pois é definido por padrão em Figma e Avocode) e jogá-la no bloco via imagem de fundo;
(* bem, você não é assim, meu jovem leitor?)
body { background: url('bg.png') 50% 50% no-repeat; background-size:contain; }
Se o desenvolvedor é um pouco mais experiente e sabe que o jpg é compactado, como regra, melhor que png, o plano de fundo estará no formato jpg.
Nível 2 Não me importo com desempenho
Se o designer de layout não se importar com o desempenho da página desenvolvida e ele souber que neste local você pode economizar significativamente o tráfego do usuário, ele poderá isolar o padrão (a parte repetida do plano de fundo) dessa imagem, se tiver sorte.
Se o layout foi implementado no PhotoShop, você deve cortar. Porque o fundo é definido por um elemento inseparável lá.
Exemplo de obtenção de um plano de fundo repetitivo do Avocode
Na Figma, isso é implementado um pouco mais fácil. Embora isso dependa de como o designer criou esse plano de fundo para você.
* Quem quiser jogar, deixarei meu exemplo para download.
No exemplo, existem duas opções com padrões png e svg, que serão discutidas mais adiante.
Ok, agora, em vez de uma imagem de fundo grande, temos um elemento de bloco repetitivo (CSS Tiling).
body { background: url("bg.jpg"); }
Muito bem, muito bem. Agora, em vez de (586kB), o usuário pega tudo do servidor (~ 24kB); Lucro!
Nível 3 eu vou apertá-lo ao máximo
Vamos pensar, é possível melhorar a situação de alguma forma? Hmm, mas a imagem não é complicada, talvez você possa ultrapassá-la em um vetor?
E então o demônio da tentação se escondeu.
Visando o melhor, muitas vezes estragamos o bom William Shakespeare
Quando isso não é feito racionalmente, ou de modo algum:
- Você tem um padrão de repetição complexo. Levará n horas para redesenhar, e se você também estiver estressando o projetista por essa tarefa, seu karma certamente diminuirá.
- Existem sombras ou elementos com desfoque na imagem e você não concorda em recusá-los.
* Aqui é necessário explicar
Se você exportar gráficos SVG, suponha do Figma ou Illustrator, mas não codifique você mesmo no editor, provavelmente os elementos de desfoque ou sombra serão inseridos no SVG no formato base64 e isso não melhorará seu desempenho, pois esse arquivo, de fato, pode pesar mais que o formato jpg analógico.
Sempre verifique o que lhe é oferecido. Obviamente, alguns desses elementos podem ser criados com código, usando o filtro de tags, use, objeto ... mas, para trabalhar com eles, você precisa de uma habilidade bombeada, o que é raro.
Ok, vamos criar um SVG e ver o que acontece.
* Por uma questão de pureza do experimento, as imagens mostradas não foram compactadas por utilitários de terceiros e salvas em 100% de qualidade usando o PhotoShop, Illustrator e Avocode.
Ok, nosso svg é menor que jpg / png da versão original.
Isso não surpreende, pois deixamos apenas as cores básicas que vimos, e não aquelas que aparecem na junção de objetos com desfoque.
A diferença entre os tamanhos dos arquivos png / jpg não parece muito significativa e começa a desempenhar um papel apenas se a imagem for grande.
* Prefiro png e defino a cor de plano de fundo como a propriedade de cor de plano de fundo, mas isso é parte da tarefa.
Fiquei um pouco confuso de que o png / jpg resultante criado a partir de svg seja menor que o tamanho SVG (mesmo limpo do lixo do sistema (pattern-bg_cleared.svg) usando SVGO )
Mas então, ocorreu-me que se eu quisesse reduzir / aumentar o tamanho do bloco de plano de fundo para celular ou TV, isso exigiria a conexão de novos padrões (pattern-bg_min) e o SVG permanecerá o mesmo (15kB - sempre) e não haverá desfoque observado
Essa é uma vantagem significativa, especialmente se o usuário visualizar a página de um telefone caro com uma boa resolução e o designer de layout, a favor do Google Page Speed, picar todos os gráficos antes dos chacais aparecerem. Aqui está salvando =)
body { background-image: url(picture.svg); }
Parece bastante familiar.
Ok, complique. Suponha que os estilos que o corpo incluirá no CSS crítico, então vamos renderizar o vetor diretamente nos estilos. * Para não desarrumar a página, adotarei um padrão diferente, um menor.
body { background: url:(' <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-2A6 6 0 108 2a6 6 0 000 12zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="#000" fill-rule="evenodd"/></svg>'); }
Havia muito CSS e ele parou de funcionar.
Então, agora é necessário codificar corretamente tudo isso. A inserção SVG não criptografada é suportada apenas pelos navegadores Webkit. Obrigado, Julia Bukhvalova, por um recurso útil de codificação que nos ajudará com isso.
body { background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }
Exemplos de ilustração: Como o SVG pode ser compactado em CSS.
O cursor é SVG
Tudo parece estar bem, mas tenho certeza de que usarei esse padrão em todas as páginas do meu site? Certamente ele precisa ser inserido no CSS crítico, ou talvez seja mais correto no habitual - CSS de plug-in e espero que o navegador o armazene em cache? Talvez, mesmo assim, você pode conectá-lo apenas a determinadas páginas? Alguém inteligente disse que o código inserido em HTML é coletado pelo navegador mais rapidamente e tem uma prioridade mais alta em termos de velocidade de renderização. Tantas perguntas ... você tem que tentar.
Nível 4, vou espremer todos os sucos de você
Primeiro, criaremos um elemento svg que terá altura e largura de 100% da unidade externa, de forma que ela ocupe qualquer contêiner no qual a tenhamos colocado.
<svg width="100%" height="100%"> </svg>
Para criar um padrão, precisamos colocá-lo na tag svg defs (definition), por exemplo:
<svg width="100%" height="100%"> <defs> <pattern> </pattern> </defs> </svg>
Já não é ruim, é necessário adicionar atributos com a ajuda dos quais podemos interagir com o padrão e, de alguma forma, chamá-lo.
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> </pattern> </defs> </svg>
Forneceremos um identificador para que possa ser referenciado posteriormente, também indicaremos as coordenadas iniciais da referência X e Y, cuja largura e altura configuramos no editor de gráficos, definiremos o escopo do ViewBox (você pode usar o svg finalizado)
... e defina o atributo patternUnits como userSpaceOnUse (isso define um sistema de coordenadas, sobre o qual você pode aprender mais sobre o MDN )
Em resumo, com patternUnits = ”userSpaceOnUse”, a forma na tela SVG é completamente preenchida com blocos de padrão. Se o último ladrilho não couber inteiramente no comprimento ou na largura, ele será aparado.
Agora precisamos decidir sobre a imagem que será repetida
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"> </circle> </pattern> </defs> </svg>
Tudo está quase pronto, resta chamar nosso padrão em um determinado objeto, bem, por exemplo, criar uma área retangular para preenchimento.
<svg width="100%" height="100%"> <defs> < pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg>
Você pode ver que o atributo de preenchimento (que geralmente contém a cor de preenchimento agora aponta para um URL que contém o identificador do nosso padrão recém-definido: fill = "url (# pattern-bg)".
Nosso padrão repetido ocupa todo o espaço em largura, mas eu também gostaria que em altura tudo ocupasse. Para fazer isso, envolva nosso svg com uma altura de altura: 100vh;
<div style="height: 100vh"> <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg> </div>
agora está bom. Claro, na tag você deve tentar inserir suas imagens mais sérias, mas eu apontei na direção certa.
Esse método de inserção, diferentemente do método em segundo plano, permite controlar os detalhes dos elementos SVG. Existe uma certa liberdade do que dar ao usuário e do que não é. E se houver um desejo de experimentar e adicionar um pouco de JS, você também poderá obter morphing (alteração de formas).
Dos problemas desse método de inserir um bloco repetitivo, descobri que não há como (bem, ou não consegui encontrá-lo, e quem sabe escrever nos comentários) como alterar o tamanho do bloco ao alterar o tamanho da tela do navegador. De fato, os atributos width / height da tag pattern são responsáveis por isso, mas não consegui alcançá-los por meio de CSS e mídia. Bem, sempre há JS se você realmente precisar
Cheats Eu não conheço os gráficos, mas quero tocar na bela
Se, por algum motivo, você não souber desenhar um elemento repetitivo de um padrão em um editor gráfico, ou não tiver tempo para isso. Aqui estão sites com soluções prontas, nas quais pessoas boas compartilham coisas boas com o mundo.
* um pequeno suplemento (onde não há pornografia hoje em dia)
https://svgporn.com/
Suporte de equipe O que há com suporte?
No começo do artigo, escrevi que todo mundo vai ficar bem, confesso, foi uma farsa.
Os usuários de IE de seus esforços não verão o suporte dessa tag para o IE e não vieram, e não virão, mas, caso contrário, com o SVG, tudo não é tão ruim, até 9 II caniuse.com
Eu também recomendaria verificar o trabalho finalizado no Firefox, às vezes há incidentes.
Para que os fãs leiam a documentação, também deixe alguns links
https://developer.mozilla.org/en/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/patternhttps://developer.mozilla.org/en/docs/Web/SVG/Tutorial/PatternsPara quem chega ao final, vou deixar meu exemplo de como se divertir com o SVG embutido, desde o início do artigo
Vamos melhorar a web.PS Agradecimentos especiais a Alexandr_TT e seu site https://svg-art.ru/ na promoção do SVG na vasta Internet de língua russa