HTML code embed into SharePoint Online page

Thomsch · ‎Aug 25 2022

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

dcancelos · ‎Aug 25 2022

Hey @Thomsch,

You could try to use the "Modern Script Editor" webpart made by the author: Mikael Svenson.

I use it for a couple of things using HTML and it works perfectly.

Let me know if it helped you!

Thomsch · ‎Aug 25 2022

Great! How can I add such a non-official webpart into SharePoint Online?
Thanks in advance

dcancelos · ‎Aug 25 2022

@Thomsch, back in the day I used this page to set it up. In theory it still works. https://www.spguides.com/script-editor-web-part-sharepoint-2016/

ganeshsanap · ‎Aug 25 2022

@Thomsch There is no SharePoint default web part to add HTML to modern pages in SharePoint.

As stated by @dcancelos, you can use the modern script editor web part to add HTML to modern pages.

Here are two useful modern script editor web parts developed using SPFx:

Modern CEWP by SPJS - Ready made SPFx .sppkg file
react-script-editor - You can download the code & build SPFx package

Once you get the .sppkg file package, you can deploy it on app catalog & then use the web part on your SharePoint sites. Refer steps for building & deploying package:

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.