-2

O que pode estar afetando minha experiência nisso? Tive que mudar algumas imagens para png, mas não sei dizer se foi a melhor forma, a experiência que eu tenho no layout em desktop é muito melhor com ícones em SVG. Por que no celular pelo navegador chrome eu tenho problemas com a renderização dos ícones, tem alguma maneira, atributo, tag ou artifício de fazer com que backgrounds reconheça esta imagem e carregue sempre?

Exemplo do CSS:

.modal-detalhes .modal-detalhes-block .resume i.association-icon {
    background: url(../img/associantion_icon.svg) center center no-repeat;
    background-size: contain;
}

Testado em mobiles como Android 9.0 Pie, iOS 9, 10 e 10 Max. E no chrome em desktop no MacbookAir com MacOS Catalina 10.15.1

2
  • 1
    É associaNtion_icon.svg mesmo? E quando fala "carregue sempre", depende. Checou no caniuse.com se os browsers testados dão suporte?
    – Largato
    Commented 23/03/2020 às 19:05
  • 1
    Isto esta parecendo alguma falha no back-end, não dá pra afirmar, precisaríamos de detalhes, você nem informou qual sistema operacional móvel esta usando e nem a versão, quero lembrar a quem estiver lendo, que se tiver o ADT (android studio) É POSSIVEL depurar o Chrome do Android, se o problema FOR EM ANDROID.
    – Syzoth
    Commented 23/03/2020 às 19:05

1 Resposta 1

1

Tem como sim e aqui tem um exemplo que o próprio Bootstrap por acaso tb usa, mas aqui tem um artigo que deve te interessar bastante com um teste usando inclusive uma solução com Base64 na URI https://css-tricks.com/lodge/svg/09-svg-data-uris/

inserir a descrição da imagem aqui

Exemplo:

O importante é começar o link com data:image/svg+xml;charset=utf8,%3C e ai entra o seu SVG

background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);

Um exemplo aplicando o Data URI no body com o SVG como Background

body {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 8 8'%3E %3Ccircle cx='1' cy='1' r='1' opacity='0.25' /%3E %3Ccircle cx='5' cy='5' r='1' opacity='0.25' /%3E %3C/svg%3E");
}

Exemplo 2

body {
    background-image:
        url("data:image/svg+xml;utf8,\
            <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'>\
                <rect fill='%23000' width='50' height='50' x='0' y='0' />\
                <rect fill='%23000' width='50' height='50' x='50' y='50' />\
                <rect fill='%23fff' width='50' height='50' x='50' y='0' />\
                <rect fill='%23fff' width='50' height='50' x='0' y='50' />\
            </svg>");
    background-size: 80px;
}


Técnica tradicional tb funciona...

.box {
  width: 100px;
  height: 100px;
  background-image: url(https://s.cdpn.io/3/kiwi.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #000;
}
  
<div class="box"></div>

3
  • Interessante! estou surpreso, dessa eu também não sabia :) +1.
    – user181348
    Commented 23/03/2020 às 18:51
  • @ledevwd valeu jovem, essa técnica é bastante útil, aqui tem outro exemplo usando para fazer um tabuleiro de Xadrez pt.stackoverflow.com/questions/319900/…
    – hugocsl
    Commented 23/03/2020 às 18:57
  • 1
    Tem que ter certeza se é problema de download ou se é outra coisa que as vezes é do lado do back-end que não esta certa, eu até entendo esse anseio que as pessoas tem em dar "suporte técnico", mas tem coisas que tem que ser investigadas e não só apresentar algo que resolve "contornando".... CC @ledevwd as coisas podem ser relativas: pt.stackoverflow.com/a/95146/3635
    – Syzoth
    Commented 23/03/2020 às 19:01

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .