HTML code embed into SharePoint Online page

Iron Contributor

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>
            <!-- 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="">
      <!-- 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 -->
              <!-- 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>


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


6 Replies

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!

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

@Thomsch, back in the day I used this page to set it up. In theory it still works.


@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:

  1. Modern CEWP by SPJS - Ready made SPFx .sppkg file
  2. 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:

  1. Build your first SharePoint client-side web part 
  2. Deploy your client-side web part to a SharePoint page 

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.

best response confirmed by Thomsch (Iron Contributor)

Hi @Thomsch 

Another possible solution is to have your HTML code on external URL and use it as an iframe inside out of box Embed web part.


For more info, please see:


Thanks guys for your help. I've used the HTML code via an external URL.