Is there a way to have the user upload an SVG file but then render the SVG source?

Question

Using 2sxc on DNN, I have a website that uses SVGs for icons in content types. The client wants to be able to upload the SVG icons to 2sxc via a Link field but then instead of rendering <img src="@Content.SVG" />, they want it to render the source code of the SVG (so we could manipulate the fill color via CSS). Is this even possible and how could it be done?

If it is possible, would there be a security risk to doing this? — Aaron - Wolf X Machina, Nov 17 '20 at 19:43
Yes. SVG files can include scripts. So anything your page can do, the SVG can do. So you need to either (i) trust your users, or (ii) block files with potentially dangerous content (` — Paul LeBeau, Nov 18 '20 at 10:45
I stuffed all Icon SVG data into strings; and then everything into **one** Custom Element file, which again outputs IMG or SVG, and has all styling options: https://IconMeister.github.io — Danny '365CSI' Engelman, Nov 18 '20 at 15:49

score 1 · Answer 1 · answered Nov 18 '20 at 10:41

Some examples of how to do this can be found below

Using a custom JS library

One example: SVGInjector

score 1 · Answer 2 · answered Nov 18 '20 at 15:26

Interestingly Dnn is doing this nowadays and you can look at the code here. If you ignore the caching, you might be able to do similar in a View. https://github.com/dnnsoftware/Dnn.Platform/blob/0d3b931d8483b01aaad0291a5fde2cbc0bac60ca/DNN%20Platform/Website/admin/Skins/Logo.ascx.cs#L123

And that is called from above, see ~line 71, so they are doing a real inject of the file contents to inline. Obviously caching file-access stuff should be a priority for caching if the website is high-traffic, but otherwise it is not needed or at least secondary.

iJungleBoy · Accepted Answer · 2020-12-07T06:30:13.043

1

Basically 2 steps

Get the real file name using 2sxc and DNN
Then load the file as a string using normal .net stuff System.IO and add it to your html - https://learn.microsoft.com/en-us/dotnet/api/system.io.file.readalltext?view=netframework-4.5.1

ca. like this

<div>
 @Html.Raw(System.IO.File.ReadAllText(fileName)
</div>

edited Dec 07 '20 at 06:30

answered Dec 06 '20 at 16:55

iJungleBoy

5,325
1
9
21

I can get the SVG icon like @Content.SVGIcon. How would I use System.IO to load it as a string? – Aaron - Wolf X Machina Dec 06 '20 at 20:20
Just read as text and output as html. Updated example. – iJungleBoy Dec 07 '20 at 06:28
I've accepted this an answer but I actually couldn't get it to work in my setup. Will have to try on a simpler project later. – Aaron - Wolf X Machina Dec 07 '20 at 20:15

Is there a way to have the user upload an SVG file but then render the SVG source?

3 Answers3

Using the fetch API

Older methods such as XMLHttpRequest or jQuery

Using D3

Using a custom JS library

Older methods such as `XMLHttpRequest` or jQuery