简体   繁体   中英

Html-to-Image SVG export

I need to be able to export everything inside a Div into an exportable SVG file. I'm using html-to-image library to do this. The issue I'm having is that the generated SVG path isn't correct and does not work as an SVG file. Tried a few things, but am stuck. Below is the entire code that you can run to test it out.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>



    <!-- 1. Constructing a Div -->
    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>


    <!-- 2. Using HTML-to-Image to convert that Div to SVG -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
      <script type="text/javascript">
        
      
      function filter (node) {
        return (node.tagName !== 'i');
      }

      htmlToImage.toSvg(document.getElementById('capture'), { filter: filter })
        .then(function (dataUrl) {

      //--3. the following Alert shows the generated SVG file for reference, but the SVG path generated is wrong
          alert(dataUrl);

          
        });
      </script>
  </body>
</html>

I tried your code and it seems that it's working well. The path seems correct and it can be used as an SVG image. Can you explain what exactly wrong with the path and how did you used the generated image?

 function filter (node) { return (node.tagName !== 'i'); } htmlToImage.toSvg(document.getElementById('capture'), {filter: filter}) .then(function (dataUrl) { document.getElementById('generated-svg').src = dataUrl });
 <h2>Original div</h2> <!-- 1. Constructing a Div --> <div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> <h2>Generated SVG (img tag)</h2> <img src="" id="generated-svg"> <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>

Generated data uri

data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221424%22%20height%3D%2281%22%20viewBox%3D%220%200%201424%2081%22%3E%3CforeignObject%20width%3D%22100%25%22%20height%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%20externalResourcesRequired%3D%22true%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20id%3D%22capture%22%20style%3D%22background%3A%20none%200%25%200%25%20%2F%20auto%20repeat%20scroll%20padding-box%20border-box%20rgb(245%2C%20218%2C%2085)%3B%20accent-color%3A%20auto%3B%20place-content%3A%20normal%3B%20place-items%3A%20normal%3B%20place-self%3A%20auto%3B%20alignment-baseline%3A%20auto%3B%20animation%3A%200s%20ease%200s%201%20normal%20none%20running%20none%3B%20app-region%3A%20none%3B%20appearance%3A%20none%3B%20backdrop-filter%3A%20none%3B%20backface-visibility%3A%20visible%3B%20background-blend-mode%3A%20normal%3B%20baseline-shift%3A%200px%3B%20block-size%3A%2061.0469px%3B%20border-block-end%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20border-block-start%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20border-color%3A%20rgb(0%2C%200%2C%200)%3B%20border-radius%3A%200px%3B%20border-style%3A%20none%3B%20border-width%3A%200px%3B%20border-collapse%3A%20separate%3B%20border-end-end-radius%3A%200px%3B%20border-end-start-radius%3A%200px%3B%20border-image%3A%20none%20100%25%20%2F%201%20%2F%200%20stretch%3B%20border-inline-end%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20border-inline-start%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20border-start-end-radius%3A%200px%3B%20border-start-start-radius%3A%200px%3B%20inset%3A%20auto%3B%20box-shadow%3A%20none%3B%20box-sizing%3A%20content-box%3B%20break-after%3A%20auto%3B%20break-before%3A%20auto%3B%20break-inside%3A%20auto%3B%20buffered-rendering%3A%20auto%3B%20caption-side%3A%20top%3B%20caret-color%3A%20rgb(0%2C%200%2C%200)%3B%20clear%3A%20none%3B%20clip%3A%20auto%3B%20clip-path%3A%20none%3B%20clip-rule%3A%20nonzero%3B%20color%3A%20rgb(0%2C%200%2C%200)%3B%20color-interpolation%3A%20srgb%3B%20color-interpolation-filters%3A%20linearrgb%3B%20color-rendering%3A%20auto%3B%20columns%3A%20auto%20auto%3B%20gap%3A%20normal%3B%20column-rule%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20column-span%3A%20none%3B%20contain-intrinsic-block-size%3A%20none%3B%20contain-intrinsic-size%3A%20none%3B%20contain-intrinsic-inline-size%3A%20none%3B%20content%3A%20normal%3B%20cursor%3A%20auto%3B%20cx%3A%200px%3B%20cy%3A%200px%3B%20d%3A%20none%3B%20direction%3A%20ltr%3B%20display%3A%20block%3B%20dominant-baseline%3A%20auto%3B%20empty-cells%3A%20show%3B%20fill%3A%20rgb(0%2C%200%2C%200)%3B%20fill-opacity%3A%201%3B%20fill-rule%3A%20nonzero%3B%20filter%3A%20none%3B%20flex%3A%200%201%20auto%3B%20flex-flow%3A%20row%20nowrap%3B%20float%3A%20none%3B%20flood-color%3A%20rgb(0%2C%200%2C%200)%3B%20flood-opacity%3A%201%3B%20font%3A%20400%2016px%20Times%3B%20font-kerning%3A%20auto%3B%20font-optical-sizing%3A%20auto%3B%20font-palette%3A%20normal%3B%20font-synthesis%3A%20weight%20style%20small-caps%3B%20grid%3A%20auto-flow%20auto%20%2F%20none%3B%20grid-area%3A%20auto%20%2F%20auto%20%2F%20auto%20%2F%20auto%3B%20height%3A%2061.0469px%3B%20hyphens%3A%20manual%3B%20image-orientation%3A%20from-image%3B%20image-rendering%3A%20auto%3B%20inline-size%3A%201404px%3B%20inset-block%3A%20auto%3B%20inset-inline%3A%20auto%3B%20isolation%3A%20auto%3B%20letter-spacing%3A%20normal%3B%20lighting-color%3A%20rgb(255%2C%20255%2C%20255)%3B%20line-break%3A%20auto%3B%20list-style%3A%20outside%20none%20disc%3B%20margin-block%3A%200px%3B%20margin%3A%200px%3B%20margin-inline%3A%200px%3B%20marker%3A%20none%3B%20mask-type%3A%20luminance%3B%20max-block-size%3A%20none%3B%20max-height%3A%20none%3B%20max-inline-size%3A%20none%3B%20max-width%3A%20none%3B%20min-block-size%3A%200px%3B%20min-height%3A%200px%3B%20min-inline-size%3A%200px%3B%20min-width%3A%200px%3B%20mix-blend-mode%3A%20normal%3B%20object-fit%3A%20fill%3B%20object-position%3A%2050%25%2050%25%3B%20offset%3A%20none%200px%20auto%200deg%3B%20opacity%3A%201%3B%20order%3A%200%3B%20orphans%3A%202%3B%20outline%3A%20rgb(0%2C%200%2C%200)%20none%200px%3B%20outline-offset%3A%200px%3B%20overflow-anchor%3A%20auto%3B%20overflow-clip-margin%3A%200px%3B%20overflow-wrap%3A%20normal%3B%20overflow%3A%20visible%3B%20overscroll-behavior-block%3A%20auto%3B%20overscroll-behavior-inline%3A%20auto%3B%20padding-block%3A%2010px%3B%20padding%3A%2010px%3B%20padding-inline%3A%2010px%3B%20paint-order%3A%20normal%3B%20perspective%3A%20none%3B%20perspective-origin%3A%20712px%2040.5234px%3B%20pointer-events%3A%20auto%3B%20position%3A%20static%3B%20r%3A%200px%3B%20resize%3A%20none%3B%20ruby-position%3A%20over%3B%20rx%3A%20auto%3B%20ry%3A%20auto%3B%20scroll-behavior%3A%20auto%3B%20scroll-margin-block%3A%200px%3B%20scroll-margin-inline%3A%200px%3B%20scroll-padding-block%3A%20auto%3B%20scroll-padding-inline%3A%20auto%3B%20scrollbar-gutter%3A%20auto%3B%20shape-image-threshold%3A%200%3B%20shape-margin%3A%200px%3B%20shape-outside%3A%20none%3B%20shape-rendering%3A%20auto%3B%20speak%3A%20normal%3B%20stop-color%3A%20rgb(0%2C%200%2C%200)%3B%20stop-opacity%3A%201%3B%20stroke%3A%20none%3B%20stroke-dasharray%3A%20none%3B%20stroke-dashoffset%3A%200px%3B%20stroke-linecap%3A%20butt%3B%20stroke-linejoin%3A%20miter%3B%20stroke-miterlimit%3A%204%3B%20stroke-opacity%3A%201%3B%20stroke-width%3A%201px%3B%20tab-size%3A%208%3B%20table-layout%3A%20auto%3B%20text-align%3A%20start%3B%20text-align-last%3A%20auto%3B%20text-anchor%3A%20start%3B%20text-decoration%3A%20none%20solid%20rgb(0%2C%200%2C%200)%3B%20text-decoration-skip-ink%3A%20auto%3B%20text-emphasis%3A%20none%20rgb(0%2C%200%2C%200)%3B%20text-emphasis-position%3A%20over%3B%20text-indent%3A%200px%3B%20text-overflow%3A%20clip%3B%20text-rendering%3A%20auto%3B%20text-shadow%3A%20none%3B%20text-size-adjust%3A%20auto%3B%20text-transform%3A%20none%3B%20text-underline-position%3A%20auto%3B%20touch-action%3A%20auto%3B%20transform%3A%20none%3B%20transform-origin%3A%20712px%2040.5234px%3B%20transform-style%3A%20flat%3B%20transition%3A%20all%200s%20ease%200s%3B%20unicode-bidi%3A%20normal%3B%20user-select%3A%20auto%3B%20vector-effect%3A%20none%3B%20vertical-align%3A%20baseline%3B%20visibility%3A%20visible%3B%20white-space%3A%20normal%3B%20widows%3A%202%3B%20width%3A%201404px%3B%20will-change%3A%20auto%3B%20word-break%3A%20normal%3B%20word-spacing%3A%200px%3B%20writing-mode%3A%20horizontal-tb%3B%20x%3A%200px%3B%20y%3A%200px%3B%20z-index%3A%20auto%3B%20zoom%3A%201%3B%20border-spacing%3A%200px%3B%20-webkit-border-image%3A%20none%3B%20-webkit-box-align%3A%20stretch%3B%20-webkit-box-decoration-break%3A%20slice%3B%20-webkit-box-direction%3A%20normal%3B%20-webkit-box-flex%3A%200%3B%20-webkit-box-ordinal-group%3A%201%3B%20-webkit-box-orient%3A%20horizontal%3B%20-webkit-box-pack%3A%20start%3B%20-webkit-font-smoothing%3A%20auto%3B%20-webkit-highlight%3A%20none%3B%20-webkit-hyphenate-character%3A%20auto%3B%20-webkit-line-break%3A%20auto%3B%20-webkit-locale%3A%20%26quot%3Ben%26quot%3B%3B%20-webkit-mask-box-image-source%3A%20none%3B%20-webkit-mask-box-image-slice%3A%200%20fill%3B%20-webkit-mask-box-image-width%3A%20auto%3B%20-webkit-mask-box-image-outset%3A%200%3B%20-webkit-mask-box-image-repeat%3A%20stretch%3B%20-webkit-mask%3A%20none%200%25%200%25%20%2F%20auto%20repeat%20border-box%20border-box%3B%20-webkit-mask-composite%3A%20source-over%3B%20-webkit-print-color-adjust%3A%20economy%3B%20-webkit-rtl-ordering%3A%20logical%3B%20-webkit-tap-highlight-color%3A%20rgba(0%2C%200%2C%200%2C%200.18)%3B%20-webkit-text-combine%3A%20none%3B%20-webkit-text-decorations-in-effect%3A%20none%3B%20-webkit-text-fill-color%3A%20rgb(0%2C%200%2C%200)%3B%20-webkit-text-orientation%3A%20vertical-right%3B%20-webkit-text-security%3A%20none%3B%20-webkit-text-stroke%3A%200px%20rgb(0%2C%200%2C%200)%3B%20-webkit-user-drag%3A%20auto%3B%20-webkit-user-modify%3A%20read-only%3B%20-webkit-writing-mode%3A%20horizontal-tb%3B%22%3E%3Cstyle%3E%3C%2Fstyle%3E%0A%20%20%20%20%20%20%20%20%3Ch4%20style%3D%22color%3A%20rgb(0%2C%200%2C%200)%3B%20accent-color%3A%20auto%3B%20place-content%3A%20normal%3B%20place-items%3A%20normal%3B%20place-self%3A%20auto%3B%20alignment-baseline%3A%20auto%3B%20animation%3A%200s%20ease%200s%201%20normal%20none%20running%20none%3B%20app-region%3A%20none%3B%20appearance%3A%20none%3B%20backdrop-filter%3A%20none%3B%20backface-visibility%3A%20visible%3B%20background%3A%20none%200%25%200%25%20%2F%20auto%20repeat%20scroll%20padding-box%20border-box%20rgba(0%2C%200%2C%200%2C%200)%3B%20background-blend-mode%3A%20normal%3B%20baseline-shift%3A%200px%3B%20block-size%3A%2018.5px%3B%20border-block-end%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20border-block-start%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20border-color%3A%20rgb(0%2C%200%2C%200)%3B%20border-radius%3A%200px%3B%20border-style%3A%20none%3B%20border-width%3A%200px%3B%20border-collapse%3A%20separate%3B%20border-end-end-radius%3A%200px%3B%20border-end-start-radius%3A%200px%3B%20border-image%3A%20none%20100%25%20%2F%201%20%2F%200%20stretch%3B%20border-inline-end%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20border-inline-start%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20border-start-end-radius%3A%200px%3B%20border-start-start-radius%3A%200px%3B%20inset%3A%20auto%3B%20box-shadow%3A%20none%3B%20box-sizing%3A%20content-box%3B%20break-after%3A%20auto%3B%20break-before%3A%20auto%3B%20break-inside%3A%20auto%3B%20buffered-rendering%3A%20auto%3B%20caption-side%3A%20top%3B%20caret-color%3A%20rgb(0%2C%200%2C%200)%3B%20clear%3A%20none%3B%20clip%3A%20auto%3B%20clip-path%3A%20none%3B%20clip-rule%3A%20nonzero%3B%20color-interpolation%3A%20srgb%3B%20color-interpolation-filters%3A%20linearrgb%3B%20color-rendering%3A%20auto%3B%20columns%3A%20auto%20auto%3B%20gap%3A%20normal%3B%20column-rule%3A%200px%20none%20rgb(0%2C%200%2C%200)%3B%20column-span%3A%20none%3B%20contain-intrinsic-block-size%3A%20none%3B%20contain-intrinsic-size%3A%20none%3B%20contain-intrinsic-inline-size%3A%20none%3B%20content%3A%20normal%3B%20cursor%3A%20auto%3B%20cx%3A%200px%3B%20cy%3A%200px%3B%20d%3A%20none%3B%20direction%3A%20ltr%3B%20display%3A%20block%3B%20dominant-baseline%3A%20auto%3B%20empty-cells%3A%20show%3B%20fill%3A%20rgb(0%2C%200%2C%200)%3B%20fill-opacity%3A%201%3B%20fill-rule%3A%20nonzero%3B%20filter%3A%20none%3B%20flex%3A%200%201%20auto%3B%20flex-flow%3A%20row%20nowrap%3B%20float%3A%20none%3B%20flood-color%3A%20rgb(0%2C%200%2C%200)%3B%20flood-opacity%3A%201%3B%20font%3A%20700%2016px%20Times%3B%20font-kerning%3A%20auto%3B%20font-optical-sizing%3A%20auto%3B%20font-palette%3A%20normal%3B%20font-synthesis%3A%20weight%20style%20small-caps%3B%20grid%3A%20auto-flow%20auto%20%2F%20none%3B%20grid-area%3A%20auto%20%2F%20auto%20%2F%20auto%20%2F%20auto%3B%20height%3A%2018.5px%3B%20hyphens%3A%20manual%3B%20image-orientation%3A%20from-image%3B%20image-rendering%3A%20auto%3B%20inline-size%3A%201404px%3B%20inset-block%3A%20auto%3B%20inset-inline%3A%20auto%3B%20isolation%3A%20auto%3B%20letter-spacing%3A%20normal%3B%20lighting-color%3A%20rgb(255%2C%20255%2C%20255)%3B%20line-break%3A%20auto%3B%20list-style%3A%20outside%20none%20disc%3B%20margin-block%3A%2021.28px%3B%20margin%3A%2021.28px%200px%3B%20margin-inline%3A%200px%3B%20marker%3A%20none%3B%20mask-type%3A%20luminance%3B%20max-block-size%3A%20none%3B%20max-height%3A%20none%3B%20max-inline-size%3A%20none%3B%20max-width%3A%20none%3B%20min-block-size%3A%200px%3B%20min-height%3A%200px%3B%20min-inline-size%3A%200px%3B%20min-width%3A%200px%3B%20mix-blend-mode%3A%20normal%3B%20object-fit%3A%20fill%3B%20object-position%3A%2050%25%2050%25%3B%20offset%3A%20none%200px%20auto%200deg%3B%20opacity%3A%201%3B%20order%3A%200%3B%20orphans%3A%202%3B%20outline%3A%20rgb(0%2C%200%2C%200)%20none%200px%3B%20outline-offset%3A%200px%3B%20overflow-anchor%3A%20auto%3B%20overflow-clip-margin%3A%200px%3B%20overflow-wrap%3A%20normal%3B%20overflow%3A%20visible%3B%20overscroll-behavior-block%3A%20auto%3B%20overscroll-behavior-inline%3A%20auto%3B%20padding-block%3A%200px%3B%20padding%3A%200px%3B%20padding-inline%3A%200px%3B%20paint-order%3A%20normal%3B%20perspective%3A%20none%3B%20perspective-origin%3A%20702px%209.25px%3B%20pointer-events%3A%20auto%3B%20position%3A%20static%3B%20r%3A%200px%3B%20resize%3A%20none%3B%20ruby-position%3A%20over%3B%20rx%3A%20auto%3B%20ry%3A%20auto%3B%20scroll-behavior%3A%20auto%3B%20scroll-margin-block%3A%200px%3B%20scroll-margin-inline%3A%200px%3B%20scroll-padding-block%3A%20auto%3B%20scroll-padding-inline%3A%20auto%3B%20scrollbar-gutter%3A%20auto%3B%20shape-image-threshold%3A%200%3B%20shape-margin%3A%200px%3B%20shape-outside%3A%20none%3B%20shape-rendering%3A%20auto%3B%20speak%3A%20normal%3B%20stop-color%3A%20rgb(0%2C%200%2C%200)%3B%20stop-opacity%3A%201%3B%20stroke%3A%20none%3B%20stroke-dasharray%3A%20none%3B%20stroke-dashoffset%3A%200px%3B%20stroke-linecap%3A%20butt%3B%20stroke-linejoin%3A%20miter%3B%20stroke-miterlimit%3A%204%3B%20stroke-opacity%3A%201%3B%20stroke-width%3A%201px%3B%20tab-size%3A%208%3B%20table-layout%3A%20auto%3B%20text-align%3A%20start%3B%20text-align-last%3A%20auto%3B%20text-anchor%3A%20start%3B%20text-decoration%3A%20none%20solid%20rgb(0%2C%200%2C%200)%3B%20text-decoration-skip-ink%3A%20auto%3B%20text-emphasis%3A%20none%20rgb(0%2C%200%2C%200)%3B%20text-emphasis-position%3A%20over%3B%20text-indent%3A%200px%3B%20text-overflow%3A%20clip%3B%20text-rendering%3A%20auto%3B%20text-shadow%3A%20none%3B%20text-size-adjust%3A%20auto%3B%20text-transform%3A%20none%3B%20text-underline-position%3A%20auto%3B%20touch-action%3A%20auto%3B%20transform%3A%20none%3B%20transform-origin%3A%20702px%209.25px%3B%20transform-style%3A%20flat%3B%20transition%3A%20all%200s%20ease%200s%3B%20unicode-bidi%3A%20normal%3B%20user-select%3A%20auto%3B%20vector-effect%3A%20none%3B%20vertical-align%3A%20baseline%3B%20visibility%3A%20visible%3B%20white-space%3A%20normal%3B%20widows%3A%202%3B%20width%3A%201404px%3B%20will-change%3A%20auto%3B%20word-break%3A%20normal%3B%20word-spacing%3A%200px%3B%20writing-mode%3A%20horizontal-tb%3B%20x%3A%200px%3B%20y%3A%200px%3B%20z-index%3A%20auto%3B%20zoom%3A%201%3B%20border-spacing%3A%200px%3B%20-webkit-border-image%3A%20none%3B%20-webkit-box-align%3A%20stretch%3B%20-webkit-box-decoration-break%3A%20slice%3B%20-webkit-box-direction%3A%20normal%3B%20-webkit-box-flex%3A%200%3B%20-webkit-box-ordinal-group%3A%201%3B%20-webkit-box-orient%3A%20horizontal%3B%20-webkit-box-pack%3A%20start%3B%20-webkit-font-smoothing%3A%20auto%3B%20-webkit-highlight%3A%20none%3B%20-webkit-hyphenate-character%3A%20auto%3B%20-webkit-line-break%3A%20auto%3B%20-webkit-locale%3A%20%26quot%3Ben%26quot%3B%3B%20-webkit-mask-box-image-source%3A%20none%3B%20-webkit-mask-box-image-slice%3A%200%20fill%3B%20-webkit-mask-box-image-width%3A%20auto%3B%20-webkit-mask-box-image-outset%3A%200%3B%20-webkit-mask-box-image-repeat%3A%20stretch%3B%20-webkit-mask%3A%20none%200%25%200%25%20%2F%20auto%20repeat%20border-box%20border-box%3B%20-webkit-mask-composite%3A%20source-over%3B%20-webkit-print-color-adjust%3A%20economy%3B%20-webkit-rtl-ordering%3A%20logical%3B%20-webkit-tap-highlight-color%3A%20rgba(0%2C%200%2C%200%2C%200.18)%3B%20-webkit-text-combine%3A%20none%3B%20-webkit-text-decorations-in-effect%3A%20none%3B%20-webkit-text-fill-color%3A%20rgb(0%2C%200%2C%200)%3B%20-webkit-text-orientation%3A%20vertical-right%3B%20-webkit-text-security%3A%20none%3B%20-webkit-text-stroke%3A%200px%20rgb(0%2C%200%2C%200)%3B%20-webkit-user-drag%3A%20auto%3B%20-webkit-user-modify%3A%20read-only%3B%20-webkit-writing-mode%3A%20horizontal-tb%3B%22%3EHello%20world!%3C%2Fh4%3E%0A%20%20%20%20%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E

Returned dataUrl from html-to-image is url encoded. So, you need to decode and also need to ommit the first mimie-type string which is the part before the comma , . In this example, I splitted the data string with , and decode the svg string.

 <div id="svg">
 </div>

 htmlToImage.toSvg(document.getElementById('capture'), { filter: filter 
       })
        .then(function (dataUrl) {
          let svg = decodeURIComponent(dataUrl.split(',')[1])
          console.log(svg);
          document.getElementById('svg').innerHTML = svg          
        });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM