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?


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.)
  • Hi thanks for that. That is the process I've already tried though. The displaying of the SVG seems ok and the links work but the SVG is far too small and not 'scalable'.
    – JaseH
    May 25 '16 at 15:27

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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.