Forum Discussion

Thomsch's avatar
Thomsch
Iron Contributor
Aug 25, 2022
Solved

HTML code embed into SharePoint Online page

A colleague of mine is using a HTML code on the current SharePoint on-prem 2013 environment to place svg graphics onto another SVG image.

 

Is it still possible to embed an HTML code into a SharePoint Online page?

<!DOCTYPE html>
<html>
  <body>
            <!-- insert width/height in line below to define picture size, makes sense to align with size of background image -->
    <svg id="screenshot1" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
      <!-- define path to background image below -->
              <image href="base-image.svg"/>
              <!--predefined marker symbols -->
              <symbol id="arrow-red-solid"><image href="./arrow_red_solid.svg"/></symbol>
              <symbol id="arrow-red-outline"><image href="./arrow_red_outline.svg"/></symbol>
              <symbol id="arrow-orange-solid"><image href="./arrow_orange_solid.svg"/></symbol>
              <symbol id="arrow-orange-outline"><image href="./arrow_orange_outline.svg"/></symbol>
              <symbol id="arrow-blue-solid"><image href="./arrow_blue_solid.svg"/></symbol>
              <symbol id="arrow-blue-outline"><image href="./arrow_blue_outline.svg"/></symbol>
              <!-- use picture markers, shapes, text as needed, follow SVG syntax  https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial -->
              <!-- shape positions are expressed in pixel where the origin is the top left corner of the image, x=left-right, y=top-bottom -->
              <line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>
              <rect x="360" y="230" width="100" height="20" style="fill:none;stroke:blue;stroke-width:2" />
              <rect x="320" y="300" rx="5" ry="5" width="100" height="20" style="fill:none;stroke:orange;stroke-width:2"/>
              <circle cx="50" cy="50" r="10" style="fill:none;stroke:red;stroke-width:2"/>
             <ellipse cx="150" cy="50" rx="30" ry="10" style="fill:none;stroke:red;stroke-width:2"/>
              <use x="80" y="180" href="#arrow-red-solid" />
              <use x="60" y="250" href="#arrow-red-outline" />
              <use x="100" y="200" href="#arrow-blue-outline" />
              <use x="120" y="220" href="#arrow-orange-outline" />
              <text x="380" y="220" font-size="24" fill="blue">Text1</text>
              
    </svg>
  </body>
</html>

 

Right now I'm not able to do that with the "embed" webpart.

Thanks

Embed Code
html
Modern Page

6 Replies

Sort By

Resources