CODEWITHSUNDEEP
c++svguwpc++-winrt
jvdh
jvdh

Reputation: 308

How to use SVG images in c++/winrt UWP application?

I have been able to programmatically display bitmap images using C++/WinRT in my UWP applications, however I can't get SVG images to work.

Below is the most simple example I could come up with. I create an application, I load an SVG image, I add it to the application window and activate the window. I have provided the source code and the SVG file below.

A few notes:

source

#include "pch.h"


using namespace winrt;
using namespace winrt::Windows::ApplicationModel::Activation;
using namespace winrt::Windows::Foundation;
using namespace winrt::Windows::UI::Xaml;
using namespace winrt::Windows::UI::Xaml::Controls;
using namespace winrt::Windows::UI::Xaml::Media::Imaging;


struct App : ApplicationT<App>
{
    Image mImage;

    void OnLaunched(LaunchActivatedEventArgs const &)
    {
        //Load PNG image - WORKS
        //mImage.Source(BitmapImage(Uri(L"ms-appx:///sample.png")));

        //Load SVG image - FAILS
        mImage.Source(SvgImageSource(Uri(L"ms-appx:///sample.svg")));
        
        //Show image on screen
        Window window = Window::Current();
        window.Content(mImage);
        window.Activate();
    }

    static void Init(ApplicationInitializationCallbackParams const &)
    {
        make<App>();
    }
};

int WINAPI wWinMain(HINSTANCE, HINSTANCE, PWSTR, int)
{
    Application::Start(App::Init);
}

sample.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
</svg>

Upvotes: 1

Views: 1297

Answers (1)

Martin Zikmund
Martin Zikmund

Reputation: 39082

The problem is not in your code, but in the fact that the file is not copied with the app content.

Click on the sample.svg file in the Solution Explorer and look into the Properties toolbar. You will see Content set as False. You need to set it to True so that the file is copied into the output folder along with other content files like images (those are Content by default, so that is why you don't have to do this).

Content setting

Upvotes: 3

Related Questions