Por que alguns visualizadores / editores não abrem corretamente este arquivo SVG?

Question

Considere este arquivo SVG (link box.com; não posso fazer upload aqui.)

Possui um símbolo "marcado" ou "marcado-v", preto em transparência. O estranho é que alguns telespectadores mostram isso corretamente, enquanto outros mostram isso como completamente vazio, ou seja, toda transparência. No que diz respeito aos editores, tanto o LibreOffice Draw quanto o Inkscape mostram uma tela vazia ao carregá-lo, enquanto o gimp mostra a marca de seleção real (ela rasteriza, é claro).

Há realmente algo errado com o SVG ou a culpa é dos aplicativos? Independentemente disso, posso alterar o SVG para que seja mais provável que ele seja lido corretamente?

    

Answer 1

Uma chave para entender os arquivos SVG é perceber que eles não são como outros formatos comuns de arquivos de imagem. Eles são uma linguagem de marcação mais semelhante a HTML e XML. Esta é a fonte do seu arquivo SVG:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path fill="context-fill" fill-opacity="context-fill-opacity" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/>
</svg>

Essa declaração path é sua marca de seleção. O atributo d= é as instruções que definem a forma da marca de seleção. Pense nisso como um pedaço de vidro perfeitamente transparente (invisível). O copo existe ... mas você não pode ver. Você pode sentir isso e sua forma ... mas você tem que fazer mais para fazê-lo para que você possa ver essa forma.

O que você não tem aqui é um atributo de traçado. Um traço definiria uma linha ao redor da borda externa da forma. Podemos definir a largura do traço (quão espessa é a linha), sua cor e outras propriedades. Não tendo feito isso ... no entanto ... não há nenhuma linha em torno da nossa forma de vidro invisível ... por isso permanece invisível.

Nós temos propriedades de preenchimento ( fill= e fill-opacity= ). Preencher define a cor e o conteúdo da superfície da sua forma. No entanto, as propriedades de preenchimento estão definidas como context-fill e context-fill-opacity . Contexto-preenchimento é um recurso não-padrão. É provável que seja suportado pela versão mais recente dos principais navegadores (eu testei pessoalmente com o mais novo Edge, Firefox e Chrome) ... no entanto, não há garantir que ele será apoiado por visualizadores de imagens e editores com maior probabilidade de ficar mais próximos dos padrões. Qualquer aplicativo que não suporte esse recurso provavelmente ignorará completamente.

E esse é o seu problema. Você não tem nenhum traçado ... e, em aplicativos que não suportam preenchimento de contexto, você não tem preenchimento. Isso deixa você com pedaços de vidro invisíveis. Está aí ... você simplesmente não consegue ver.

    

Answer 2

Quando carreguei o arquivo no Inkscape, ele ficou vazio, mas o Control-A selecionou "tudo isso". Usando o recurso de traço e preenchimento do Inkscape, deixei o preenchimento vazio e adicionei a cor do traço.

A imagem superior tem uma largura de traçado de 0,265 mm, enquanto a parte inferior tem um valor muito menor.