Pergunta de suporte do WordPress SVG: SVG não é exibido no arquivo de mídia ou frontend

Um usuário perguntou ?

Olá!

Eu carreguei o plugin usando o Firefox, no meu laptop eu uso o Chrome e eles sumiram. Eu também tenho um cheque de amigo e ela também não vê o cabeçalho na borda.

Eu perdi alguma coisa ao configurar o plugin? Estou usando o tema DIVI.

Muito obrigado

Charlotte

(@benbodhi)

2 anos, 5 meses atrás

Olá,

Meu plugin funciona muito bem com o Divi.

No entanto, eu tenho isso no meu tema CSS para garantir que as imagens SVG sejam sempre exibidas, pois às vezes elas podem ser exibidas em 0px porque SVGs não são realmente imagens:

.et_pb_image img { width: 100%; }

Também notei que posso estar usando o recurso “Force Inline” do meu plug-in, que raramente é necessário ou recomendado. Divi não precisa… E pode até criar problemas. Então tente deletar isso também.

Eu posso ver todo o conteúdo em seus cabeçalhos, ele tem apenas um fundo branco/transparente com texto branco. Eu não sei exatamente o impacto que isso teria, mas nunca se sabe. Tente essas 2 coisas e deixe-me saber.

(@fandrdesigns)

2 anos, 5 meses atrás

Obrigado Benbodhi por sua pronta resposta! ok eu fiz os 2 pontos que você mencionou e ainda não está feliz.

Abri o Firefox e todos funcionaram perfeitamente! então é um problema do navegador, você poderia corrigi-lo?

Obrigado novamente ?

(@benbodhi)

2 anos, 5 meses atrás

Eu acho que seu problema é que você está usando os arquivos SVG como imagens de fundo em CSS e eles não são arquivos SVG reais, eles são apenas incorporados em PNG ou JPG.

Eu os converteria em PNG ou JPG para os planos de fundo, já que eles não são vetores de qualquer maneira.

Além disso, exceto pela web, eles são realmente enormes. Isso traz muitos problemas com o carregamento. Apenas a imagem de notícias e resenhas excede 3MB :O.

P.S. Essa é uma parte legal que você está construindo 🙂

(@fandrdesigns)

2 anos, 5 meses atrás

Obrigado Benbodhi, sim, você está certo, são imagens de fundo, mas o texto sai vagamente em png e jpg, todos eles disseram usar svg? Eu só quero dar uma olhada se você entende o que quero dizer.

(@benbodhi)

2 anos, 5 meses atrás

Eu entendo com certeza.

Mas não usará vetores reais enquanto não houver imagens raster dentro do SVG. O formato SVG não é usado, embora contenham imagens raster, pois não serão dimensionadas e fornecerão resultados estranhos como você encontrou.

O SVG é melhor para ícones, logotipos, elementos simples de fundo e similares, para permitir qualidade escalável e tamanho de arquivo pequeno. Nesse caso, acho que a regra “usar SVG” o enganou um pouco. No entanto, você pode usar SVG apenas para texto, semelhante a uma opção que explicarei mais tarde.

Você deve poder salvar imagens em texto como PNGs sem perder qualidade, desde que tenham o tamanho correto. E salve fundos de estilo de foto apenas como JPG para economizar o tamanho do arquivo. (sempre salvar na web).

Como está atualmente, as imagens são muito grandes para serem carregadas corretamente, então você deve reduzir o tamanho do arquivo, independentemente de sua qualidade.

Para ser honesto, eu ajustaria a maneira como você implementa isso, mas pode ficar um pouco técnico. O que você está tentando alcançar é um efeito bastante técnico.

Você pode usar fundos raster JPG/PNG (somente imagem) que são traduzidos para fora e colocar os elementos de texto (ou SVG apenas com texto de contorno) na marcação separada. Basta definir as classes/IDs no novo elemento de texto divs/SVG e mostrá-los/ocultá-los junto com o plano de fundo correto.

Este será um benefício adicional se o texto também for pesquisado por SEO. Essa é a abordagem que eu tomaria pessoalmente.

—–

Agora, um título para esses tópicos diz que o SVG é “SVG não é exibido no arquivo de mídia ou no front end”.

Você pode enviar um SVG correto para teste, por favor? Aqui está um que eu sei que está pronto para carregar:

(@benbodhi)

2 anos, 5 meses atrás

Olá,

Vou marcar este tópico como resolvido, pois o problema em questão não é seu problema.

A ajuda está aqui se você ainda precisar dela.

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *