11

How to add a .svg file in a WPF window in C# as an image (,png || ,jpg)?

I use the code 

<Image HorizontalAlignment="Left" Height="53" Margin="34,39,0,0"
           VerticalAlignment="Top" Width="71" 
           Source="Test.svg" Name="MyImage"/>

But I get an error:

Blend does not support format svg.

I found that I could change the .svg file into a .xaml file. But I still do not know how to add the xaml as an image.

Based on an answer, I changed my code like this:

<Window x:Class="NIA_UI_Demo_CSharp.ShareDocumentsWin"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ShareDocumentsWin" Height="350" Width="569">

<ResourceDictionary>
    <Style x:Key="TheAwesomeXAMLimage" TargetType="ContentControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    my code
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

<Grid Margin="0,0,2,3">
    <ContentControl Style="{StaticResource TheAwesomeXAMLimage}"/>
</Grid>
</Window>

But I get an error:

Content is set more than once;

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
cindywmiao
  • 937
  • 2
  • 11
  • 26
  • 1
    Personally, for SVG's I just export them to XAML, but then it's no longer an `Image` it's vector data generally in a Canvas or something, but you can still re-use them etc by just putting that data in a ContentControl or something similar – Chris W. Oct 01 '14 at 22:08
  • @ChrisW. How to add a xml as canvas || contentcontrol? I could not find Source inside this two? Only SourceUpdate – cindywmiao Oct 01 '14 at 22:32
  • Just take your exported XAML from your .svg, and then you can just use an [old answer here](http://stackoverflow.com/questions/13292179/best-way-to-use-a-vector-image-in-wpf/13293017#13293017) and paste it where it says "Just paste your xaml here" and follow the rest of it, no problem. I'm not sure what you mean by "Source" though. – Chris W. Oct 01 '14 at 22:37
  • @ChrisW. Thanks a lot. And I changed my code like the question I edited above. And I got an error: Content is set more than Once; Do you know why? – cindywmiao Oct 01 '14 at 23:02
  • @ChrisW. I found out where is wrong, thanks. – cindywmiao Oct 01 '14 at 23:38

2 Answers2

24

As far as I know you cannot include svg-files directly. Two options:

  1. use library that can handle svg-files in runtime: https://sharpvectors.codeplex.com/ (moved to https://github.com/ElinamLLC/SharpVectors)
  2. convert the svg to xaml and use them with native wpf objects (Path, Image..)

I prefer the second option, so I wrote a tool which can convert a single svg to xaml and can also batch convert a bunch of svg-files. The workflow is: just put the svg-file to your images-folder, call the batch-converter and find the images.xaml file (a resource-dictionary) updated with the new icons/images.

See https://github.com/BerndK/SvgToXaml

Community
  • 1
  • 1
BerndK
  • 1,045
  • 10
  • 14
  • 1
    I really can recommend the tool by BerndK. It works like a charm and is easy to use. I had some problems with sharpvectors not viewing the images when running the problem and i was not able to figure the problem out. However BerndKs tool made it very simeple to convert my svg files into Geometies! – Jens Apr 16 '17 at 09:56
  • Just downloaded and am happy enough with BerndK's SvgToXaml. Though I've got several feOffset and feColorMatrix, feGaussianBlur, feComposit, etc values that it misses, but still...it gives me a great start, just stick its output as the `` – Keith Jul 15 '19 at 21:20
  • Hey @BerndK I'm using the library, but it shows only black & white images man. I integrated the SVGXAML project, so i am loading the images on the fly, but they show in Black & White – Joseph Wambura Jun 19 '20 at 11:35
  • @Joseph: the library is designed to convert an SVG to a .NET Path object. This one is by design not colored, so you can (and have to) set the color you like. This is good for single color icons used by modern designs. If you want multi color icons, you could combine several paths (as shown in the demo of SvgToXaml), but i would consider to use png files. Doing so you might loose the advantage of paths/geometries: scalable without quality loss. – BerndK Jun 22 '20 at 14:17
0

I was lucky that I have DevExpress available where you can use WpfSvgRenderer.CreateImageSource. Don't want to advertise here, but since it's a widely used library, probably some are happy to know.

Unfortunately text element inside the svg is not supported yet.

Diego Frehner
  • 2,396
  • 1
  • 28
  • 35