SVG no WPF: escolha um renderizador ou desenho XAML

Um SVG abre no navegador, mas colocar seu nome de arquivo em um Image do WPF não fornece o mesmo fluxo de renderização. Comece escolhendo o que o aplicativo realmente receberá: SVG processado por uma biblioteca, objetos de desenho nativos do WPF ou uma exportação raster.

Os codecs de imagem integrados do WPF incluem PNG e JPEG, mas não listam SVG. Seu controle Image também pode exibir um DrawingImage, portanto uma exibição vetorial não precisa significar carregar um arquivo SVG diretamente. A Microsoft documenta essas opções como fluxos separados de imagens e origem de desenho.

Este guia usa um ícone original de marcador de página para tornar essa escolha concreta. O SVG e o XAML abaixo foram escritos manualmente; não são um teste comparativo de conversores nem uma captura de um aplicativo Windows.

Escolha a representação antes de alterar o arquivo

Essas escolhas dizem respeito ao objeto que seu aplicativo exibe. Elas não decidem se o designer deve manter um mestre SVG editável. Preserve esse mestre mesmo que o aplicativo receba um PNG.

Experimente primeiro um pequeno DrawingImage nativo

Para um ícone simples, um desenho feito manualmente oferece uma referência útil sem introduzir um interpretador SVG. A Microsoft mostra a estrutura: defina Image.Source como um DrawingImage e atribua o desenho à sua propriedade Drawing. O exemplo original abaixo segue esse padrão documentado.

Aqui está o desenho SVG: um marcador de página verde-azulado e um círculo coral separado. Salve-o como bookmark.svg se quiser um arquivo original para comparar no editor.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

Coloque este Image dentro do contêiner de layout de uma janela WPF existente, como um Grid:

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

Os dois objetos de desenho visíveis descrevem o marcador e o círculo separadamente. O retângulo transparente estabelece os limites completos de 120 por 80 do desenho do exemplo, incluindo a margem vazia ao redor da arte. Ele não recorta geometrias posteriores nem transforma o XAML em um documento SVG.

As coordenadas são escolhas deliberadas de criação. Compare os dois trechos: o marcador usa os mesmos pontos, e o círculo usa o mesmo centro e raio. Essa é uma pequena tradução manual que você pode revisar, não uma receita para traduzir todos os recursos de SVG para XAML.

Os arquivos de origem foram verificados como XML, mas este exemplo não foi compilado nem renderizado em um aplicativo WPF no Windows. Teste-o no seu projeto antes de adotá-lo.

Confira os limites e os pincéis antes de torná-lo reutilizável

Comece no tamanho fornecido. Confirme que o entalhe inferior do marcador continua visível e que o círculo permanece separado. Depois, experimente um espaço de layout mais largo ou mais alto. Stretch="Uniform" preserva as proporções ao ajustar à área disponível, conforme descrito nas orientações da Microsoft sobre esticar imagens.

Altere o valor coral de Brush para outra cor. Essa é uma edição intencional de um objeto nativo de desenho; não é evidência de que partes de SVGs arbitrários importados oferecerão os mesmos controles convenientes.

Se o desenho parece fora do centro, compare seus limites com o viewBox do SVG e as margens vazias. Uma silhueta correta ainda pode ocupar outra fração de seu espaço de layout. Mantenha essa referência simples enquanto introduz a arte final.

Use um renderizador quando SVG continuar sendo a entrada

Quando manter a geometria nativa manualmente for impraticável, avalie uma biblioteca que leia explicitamente SVG para WPF. O pacote SharpVectors.Wpf fornece componentes de interpretação, conversão e visualização SVG. Sua página de pacote é o lugar adequado para conferir a versão atual, os frameworks de destino e as dependências antes de adicioná-lo a um projeto.

A documentação de primeiros passos do SharpVectors descreve a conversão em objetos de desenho WPF e exemplos de exibição baseada em imagem. Isso a torna uma opção diferente de pedir ao fluxo comum de bitmaps que decodifique um nome de arquivo SVG.

Use o marcador original como primeira entrada da biblioteca e substitua-o pela sua arte real. Mantenha estas verificações separadas:

1. Carregamento: o exemplo escolhido encontra o arquivo ou recurso de aplicativo no seu projeto?
2. Representação: a API retorna objetos de desenho, produz XAML ou renderiza um bitmap para seu caso de uso?
3. Aparência: o entalhe, o círculo separado, as cores e as margens vazias estão corretos no aplicativo em execução?
4. Implantação: o resultado exige o assembly de execução da biblioteca ou outros recursos na máquina de destino?

Siga os exemplos que correspondem à versão instalada. O SharpVectors documenta uma configuração IncludeRuntime, marca TextAsGeometry como obsoleto e destaca mudanças de namespace na versão 2.0. Esses são motivos para revisar trechos antigos antes de copiar suas configurações, não para supor que uma configuração de conversão continuará adequada indefinidamente. Documentação do SharpVectors

Para um logo com letras, inspecione a saída real de destino e também o arquivo original. Nosso guia de mudanças de fonte SVG explica a diferença entre texto que depende de fontes e letras mantidas como contornos. Converter texto pode mudar o que continua editável; por isso, mantenha o arquivo original do desenho.

Não use SvgImageSource do framework XAML errado

Uma busca por esse problema pode levar à referência SvgImageSource da Microsoft. A documentação da classe UWP coloca esse tipo em Windows.UI.Xaml.Media.Imaging. Essa é uma API diferente dos controles e classes de mídia System.Windows do WPF.

Confira o framework indicado por um exemplo antes de adicionar um namespace ou pacote. Uma marcação XAML semelhante não transforma uma origem de imagem UWP ou WinUI em um recurso integrado do WPF. Uma solução para outro framework pode ser válida nele e ainda ser a resposta errada para seu projeto desktop.

Decida se um PNG é suficiente

Uma exportação PNG é uma escolha razoável de entrega quando os tamanhos necessários são conhecidos e o aplicativo não precisa editar a geometria. Exporte para esses tamanhos, compare as bordas transparentes com o fundo real e inspecione o maior uso de exibição. Aumentar o tamanho de layout de um bitmap não recria os traçados da arte original.

Confira também o que há dentro do SVG antes de investir tempo em uma biblioteca de renderização. Se ele só incorpora uma imagem raster, importar o invólucro não torna essa imagem geometria editável. O guia de SVG com raster incorporado mostra o que inspecionar. Para uma coleção de ícones, use as mesmas margens e verificações de silhueta em todo o conjunto; nosso fluxo de preparação de ícones de interface aborda essa etapa da arte.

Se o marcador ou logo existe apenas como PNG ou JPG, o fluxo de imagem para vetor do PerfectVector pode ajudar a preparar uma versão candidata em SVG editável. Inspecione a silhueta recuperada, o entalhe e os detalhes separados antes de escolher uma opção de entrega para WPF. A vetorização prepara a arte; ela não instala um renderizador WPF nem garante uma conversão nativa para XAML.

O guia mais amplo de vetorização de imagens explica essa etapa de recuperação da arte original. Quando a arte estiver pronta, as verificações do aplicativo ainda pertencem ao WPF.

Perguntas frequentes

WPF Image pode carregar um arquivo SVG diretamente? Os codecs de imagem integrados documentados do WPF não incluem SVG. Use uma biblioteca compatível com SVG, forneça objetos nativos de desenho por DrawingImage ou forneça um formato raster compatível, como PNG.

DrawingImage é a mesma coisa que um arquivo SVG? Não. DrawingImage exibe objetos de desenho WPF. Uma biblioteca SVG pode criar esses objetos, ou você pode criá-los diretamente, como no pequeno exemplo daqui.

Posso usar o exemplo UWP de SvgImageSource no WPF? Não o trate como uma API integrada do WPF. A referência UWP pertence a outro namespace e framework; escolha código e dependências para seu aplicativo real.

Converter um SVG para XAML preservará todos os efeitos? Não suponha isso. Confira as capacidades documentadas do conversor e inspecione sua arte no aplicativo de destino, incluindo texto, limites, formas separadas e efeitos.

Fontes

1. Microsoft — visão geral de imagens no WPF — Formatos bitmap integrados e comportamento de ajuste de imagens.
2. Microsoft — usar um desenho como origem de imagem — DrawingImage nativo e estrutura de objetos de desenho.
3. SharpVectors — primeiros passos — Conversão de desenhos WPF, configurações de execução e cuidados documentados de migração.
4. NuGet — SharpVectors.Wpf — Identidade atual do pacote e informações de compatibilidade.
5. Microsoft — classe UWP SvgImageSource — Limite de framework e namespace de uma API frequentemente confundida.

Escolha uma opção WPF e compare um desenho pequeno antes de substituir todo o conjunto de recursos. Se uma arte raster precisa de recuperação, prepare uma versão candidata em SVG editável, inspecione as formas e teste a representação escolhida no aplicativo.