How to include images (png) to SvgDocument?

[lucgomoliv]

I was trying to draw a SVG but it has a <image> in the <g> but because of the AvailableElements it's not become part of the document. Have a way to include these images in the SvgDocument? And after drawing it with the SVG?

Edit: It's a reference to a file in the computer.

[H1Gdev]

@lucgomoliv

Do you have specific sample codes ?

[lucgomoliv]

I have this XML:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="224" viewBox="0 0 300 224" xml:space="preserve">
<desc>Created with Fabric.js 3.6.3</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 150 112)">
	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="C:/Users/luqui/Desktop/onibusLateral.png" x="-150" y="-112" width="300" height="224"></image>
</g>
<g transform="matrix(1 0 0 1 147 61.5)">
<path style="stroke: rgb(255,0,0); stroke-width: 5; stroke-dasharray: none; stroke-linecap: round; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform=" translate(-147, -61.5)" d="M 125.005 38 Q 125 38 124.5 38 Q 124 38 123.5 38 Q 123 38 122.5 38 Q 122 38 121.5 38 Q 121 38 121 38.5 Q 121 39 121.5 39.5 Q 122 40 122.5 40.5 Q 123 41 123.5 41.5 Q 124 42 125 43 Q 126 44 126.5 45.5 Q 127 47 128.5 48 Q 130 49 130.5 50 Q 131 51 132 52.5 Q 133 54 134 55 Q 135 56 136 57 Q 137 58 138.5 59 Q 140 60 141 60.5 Q 142 61 143 62 Q 144 63 145 64 Q 146 65 147 66 Q 148 67 149 68 Q 150 69 151 69.5 Q 152 70 153 71 Q 154 72 154.5 73 Q 155 74 156 74.5 Q 157 75 158 76 Q 159 77 160 77 Q 161 77 162 78 Q 163 79 163.5 79.5 Q 164 80 164.5 80.5 Q 165 81 165.5 81.5 Q 166 82 166.5 82.5 Q 167 83 167.5 83.5 Q 168 84 168.5 84 Q 169 84 169.5 84 Q 170 84 170.5 84 Q 171 84 171.5 84.5 Q 172 85 172.5 85 L 173.005 85" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 135.5 66)">
<path style="stroke: rgb(255,0,0); stroke-width: 5; stroke-dasharray: none; stroke-linecap: round; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform=" translate(-135.5, -66)" d="M 172.005 43 Q 172 43 171.5 42.5 Q 171 42 170.5 42 Q 170 42 169.5 42 Q 169 42 168.5 42 Q 168 42 167.5 42 Q 167 42 166.5 42 Q 166 42 165 42 Q 164 42 163 42.5 Q 162 43 161.5 43 Q 161 43 160.5 43.5 Q 160 44 159.5 44.5 Q 159 45 158 45 Q 157 45 155.5 45.5 Q 154 46 153.5 46.5 Q 153 47 152.5 47 Q 152 47 151.5 47 Q 151 47 150 47.5 Q 149 48 148.5 48.5 Q 148 49 147 49.5 Q 146 50 145 50.5 Q 144 51 143.5 51.5 Q 143 52 142 52.5 Q 141 53 140.5 53.5 Q 140 54 139.5 54.5 Q 139 55 138 55.5 Q 137 56 136 56.5 Q 135 57 134 58 Q 133 59 132 59 Q 131 59 130 60 Q 129 61 128.5 61.5 Q 128 62 127 62.5 Q 126 63 125.5 63.5 Q 125 64 124 65 Q 123 66 121.5 66.5 Q 120 67 120 68 Q 120 69 119 69.5 Q 118 70 117 71 Q 116 72 115.5 72.5 Q 115 73 114 74 Q 113 75 112.5 75.5 Q 112 76 111 76.5 Q 110 77 109.5 77 Q 109 77 108.5 77.5 Q 108 78 107.5 78 Q 107 78 106.5 79 Q 106 80 106 80.5 Q 106 81 105.5 81.5 Q 105 82 104.5 83 Q 104 84 103.5 84 Q 103 84 103 84.5 Q 103 85 102.5 85.5 Q 102 86 102 86.5 Q 102 87 101.5 87 Q 101 87 101 87.5 Q 101 88 100.5 88 Q 100 88 99.5 88.5 Q 99 89 99 89.5 L 99 90.005" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 266 156.5)">
<path style="stroke: rgb(255,0,0); stroke-width: 5; stroke-dasharray: none; stroke-linecap: round; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform=" translate(-266, -156.5)" d="M 238.995 131.995 Q 239 132 240.5 132 Q 242 132 243 132.5 Q 244 133 244.5 133 Q 245 133 245.5 133.5 Q 246 134 246.5 134 Q 247 134 248 134.5 Q 249 135 249.5 135 Q 250 135 251 136 Q 252 137 253 137.5 Q 254 138 254.5 138.5 Q 255 139 256 139.5 Q 257 140 257.5 140.5 Q 258 141 259 141.5 Q 260 142 261 142.5 Q 262 143 263 144 Q 264 145 264.5 145.5 Q 265 146 266 147 Q 267 148 267.5 148 Q 268 148 269 149 Q 270 150 271 150.5 Q 272 151 272.5 152 Q 273 153 274 153.5 Q 275 154 275.5 154.5 Q 276 155 277 155.5 Q 278 156 278 156.5 Q 278 157 279 158.5 Q 280 160 280 160.5 Q 280 161 281 161.5 Q 282 162 282.5 163 Q 283 164 283.5 164.5 Q 284 165 284.5 166 Q 285 167 285.5 167 Q 286 167 286.5 168 Q 287 169 287 169.5 Q 287 170 287.5 170.5 Q 288 171 288.5 172 Q 289 173 289 173.5 Q 289 174 289.5 174.5 Q 290 175 290 175.5 Q 290 176 290.5 176 Q 291 176 291 176.5 Q 291 177 291.5 178 Q 292 179 292 179.5 Q 292 180 292 180.5 Q 292 181 292.5 181 L 293.005 181" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 262 160)">
<path style="stroke: rgb(255,0,0); stroke-width: 5; stroke-dasharray: none; stroke-linecap: round; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform=" translate(-262, -160)" d="M 275.005 138 Q 275 138 274.5 138 Q 274 138 273.5 138 Q 273 138 272.5 138.5 Q 272 139 271.5 139.5 Q 271 140 271 140.5 Q 271 141 270.5 141.5 Q 270 142 270 142.5 Q 270 143 269 143.5 Q 268 144 267.5 144.5 Q 267 145 267 145.5 Q 267 146 266.5 147 Q 266 148 265.5 148 Q 265 148 264.5 149 Q 264 150 263 150.5 Q 262 151 262 151.5 Q 262 152 261.5 152.5 Q 261 153 260.5 153.5 Q 260 154 259 155 Q 258 156 258 156.5 Q 258 157 257.5 158 Q 257 159 256.5 160 Q 256 161 256 161.5 Q 256 162 255.5 163 Q 255 164 254.5 165 Q 254 166 254 167 Q 254 168 253.5 169 Q 253 170 252.5 171 Q 252 172 251.5 173 Q 251 174 251 175 Q 251 176 250.5 176.5 Q 250 177 249.5 177.5 Q 249 178 249 179.5 Q 249 181 249 181.5 L 249 182.005" stroke-linecap="round" />
</g>
</svg>

This SVG have a embedded image:
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="C:/Users/luqui/Desktop/onibusLateral.png" x="-150" y="-112" width="300" height="224"></image>

When I try to load this string or file in a SvgDocument, it doesn't load this <image> element in the document, so I don't know if this is supported, so the image just shows the red X's and not the image behind.

Sample code:

 using (var ms = new MemoryStream(Encoding.UTF8.GetBytes(svg)))
            {
                SvgDocument document = SvgDocument.Open(ms);
                pictureBox.Image = document.Draw();
            }

[H1Gdev]

@lucgomoliv

I can display a PNG image with the following code.

using (var ms = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(svg)))
{
    SvgDocument document = SvgDocument.Open<SvgDocument>(ms);
    svgImage.Image = document.Draw();
}

output

First, make sure that PNG file path is correct.

[lucgomoliv]

I debug with the dll and it doesn't consider (for me) the <image>, have a list with "available elements" and the image isn't there, so it doesn't show. Maybe the version? I downloaded the source and built it targeting .net framework 4.0 as shown here: https://svg-net.github.io/SVG/doc/GettingStarted.html#rolling-your-own-version

Edit: the path is correct, I'm sure about this

[lucgomoliv]

Ok, I realized what happened, because of <SvgDocument> after Open. I downloaded the version from CodePlex and this version maybe is older, so I was able to build it in the framework 4.0. I downloaded the version from GitHub now and it doesn't accept this version. Sorry for this. Thanks for patience and try to help.