none
Visio SVG Does Not Resize in a SharePoint 2013 Wiki Page

    Question

  • Using the Visio web part in SharePoint 2013 works great, except that it does not display on ios devices.

    I created a simple Visio 2013 diagram with a few hyperlinks and saved it as an SVG file.  I then created a Wiki page in SharePoint 2013 and added a Script Editor web part.  I copied the code from within the SVG file and pasted it into the Script Editor web part and saved everything.

    Works like a champ - EXCEPT - the SVG file behaves as if it were a JPG or PNG - it will not scale to fit the window when I change the browser window size.

    I would like it to behave similar to using a Visio VDW file in a Visio Web Part where, changing the browser window size and refreshing, causes the Visio diagram to get smaller or larger.

    I know NOTHING about CSS and precious little about anything not out-of-the-box SharePoint, but I think I may either need to modify what CSS is in the SVG or add another Script Editor with additional CSS.

    Any help is greatly appreciated.


    • Edited by Raymond Ares Thursday, March 16, 2017 7:21 PM Clarify
    Thursday, March 16, 2017 6:49 PM

All replies

  • Hi,

    Could you provide the code in the Script Editor web part here?

    I need to check for the code, then give you a suggestion about how to resize image dynamically.

    Thanks,

    Dean Wang


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Saturday, March 18, 2017 9:40 AM
    Moderator
  • I get a message stating that I cannot upload code that contains links until my account has been verified.

    Tuesday, March 21, 2017 12:11 AM
  • Hi,

    You can click “Remove hyperlink” button to remove the hyperlink, which only shows the text of URL here.

    Thanks,

    Dean Wang


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, March 21, 2017 11:39 AM
    Moderator
  • Below is the code contained in the SVG file that was created in Visio 2013:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <!-- Generated by Microsoft Visio, SVG Export SVGTest.svg Page-1 -->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="7.54167in" height="5.07292in"
      viewBox="0 0 543 365.25" xml:space="preserve" color-interpolation-filters="sRGB" class="st6">
     <v:documentProperties v:langID="1033" v:viewMarkup="false">
      <v:userDefs>
       <v:ud v:nameU="msvNoAutoConnect" v:val="VT0(1):26"/>
      </v:userDefs>
     </v:documentProperties>

     <style type="text/css">
     <![CDATA[
      .st1 {fill:#c05046;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
      .st2 {fill:#ffffff;font-family:Calibri;font-size:1.99999em}
      .st3 {fill:#9dbb61;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
      .st4 {fill:#ab9ac0;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
      .st5 {fill:#f59d56;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
      .st6 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
     ]]>
     </style>

     <g v:mID="0" v:index="1" v:groupContext="foregroundPage">
      <title>Page-1</title>
      <v:pageProperties v:drawingScale="1" v:pageScale="1" v:drawingUnits="19" v:shadowOffsetX="9" v:shadowOffsetY="-9"/>
      <a xlink:href="http://www.google.com">
       <g id="shape1-1" v:mID="1" v:groupContext="shape" transform="translate(18.375,-196.125)">
        <title>Sheet.1</title>
        <desc>Google</desc>
        <v:textBlock v:margins="rect(4,4,4,4)"/>
        <v:textRect cx="75.375" cy="289.875" width="150.75" height="150.75"/>
        <rect x="0" y="214.5" width="150.75" height="150.75" class="st1"/>
        <text x="40.78" y="297.08" class="st2" v:langID="1033"><v:paragraph v:horizAlign="1"/><v:tabList/>Google</text>   </g>
      </a>
      <a xlink:href="http://www.amazon.com">
       <g id="shape2-4" v:mID="2" v:groupContext="shape" transform="translate(196.125,-196.125)">
        <title>Sheet.2</title>
        <desc>Amazon</desc>
        <v:textBlock v:margins="rect(4,4,4,4)"/>
        <v:textRect cx="75.375" cy="289.875" width="150.75" height="150.75"/>
        <rect x="0" y="214.5" width="150.75" height="150.75" class="st3"/>
        <text x="35.72" y="297.08" class="st2" v:langID="1033"><v:paragraph v:horizAlign="1"/><v:tabList/>Amazon</text>   </g>
      </a>
      <a xlink:href="http://www.bing.com">
       <g id="shape3-7" v:mID="3" v:groupContext="shape" transform="translate(196.125,-18.375)">
        <title>Sheet.3</title>
        <desc>Bing</desc>
        <v:textBlock v:margins="rect(4,4,4,4)"/>
        <v:textRect cx="75.375" cy="289.875" width="150.75" height="150.75"/>
        <rect x="0" y="214.5" width="150.75" height="150.75" class="st4"/>
        <text x="54.14" y="297.08" class="st2" v:langID="1033"><v:paragraph v:horizAlign="1"/><v:tabList/>Bing</text>   </g>
      </a>
      <a xlink:href="http://www.ebay.com">
       <g id="shape4-10" v:mID="4" v:groupContext="shape" transform="translate(373.875,-18.375)">
        <title>Sheet.4</title>
        <desc>eBay</desc>
        <v:textBlock v:margins="rect(4,4,4,4)"/>
        <v:textRect cx="75.375" cy="289.875" width="150.75" height="150.75"/>
        <rect x="0" y="214.5" width="150.75" height="150.75" class="st5"/>
        <text x="51.7" y="297.08" class="st2" v:langID="1033"><v:paragraph v:horizAlign="1"/><v:tabList/>eBay</text>   </g>
      </a>
     </g>
    </svg>

    Wednesday, March 22, 2017 12:30 AM
  • Hi,

    You add the following script under your code in the Script Editor web part:

    <script type="text/javascript">
    
    window.onload = function () {
    
                window.onresize = function() {
    
                            var width = window.innerWidth - 125;
    
                            width = width+"px";
    
                            document.querySelector(".st6").setAttribute("width", width);
    
                }
    
    }
    
    </script>
    

    You can change the 125 value in the code to make picture size work fine.

    Thanks,

    Dean Wang


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    2 hours 22 minutes ago
    Moderator