How can I display an SVG in SharePoint 2013

Question

I have an SVG file created with links to navigate to other pages.

If I open this file directly in a browser it displays, scales and is selectable as it should be.

When I embed the code in SP 2013 in the script editor the image is only displayed as a small (thumbnail) sized image. I've tried messing with the sizing options of the webpart but nothing seems to work.

How can I get this to display fully inside my SP2013 page?

Answer 1

Here is what I found from http://wolfig-techblog.blogspot.in/2015/03/creating-interactive-svgs-in-sharepoint.html?m=1

1. Opening the SVG in a text editor (I use Notepad++)
2. Copy and paste the content of the SVG in text editor to the Script Editor web part
3. Delete anything irrelevant in the SVG code (like references to inkscape)
4. Tweak the SVG by adjusting the code in the Script Editor(e.g. linking, etc.)

Answer 2

You need to take a look at the viewBox attribute. There's a good description of how SVG and viewBox (as well as preserveAspectRatio) work.

https://www.sarasoueidan.com/blog/svg-coordinate-systems/

You don't have to add anything special in SharePoint for it to understand how to render SVG...you just need to be familiar with how SVG works.