title: How to export/save SVG independent from browser viewport (e.g. with predefined height and width)
body: <p>I need to export multiple radar-charts (SVGs visualized with D3) in a standardized format, which does not depend on the current size of the rendered SVG. Which would be the best way to accomplish that export?</p>
  
  <p>My current approach:
  I open new tab with an export specific predefined layout.
  Since I have multiple charts as SVG s, I create a PNG for each Chart and place them in a canvas, which I then export as PNG again. After the export-canvas is rendered, I download the image.</p>
  
  <p>My Problem:
  This method does only work for some browsers (IE and Edge are not working correctly for unknown reasons) and the new Tab is kind of disturbing.
  Is there a way to hide the rendering of the export-layout? I use a Nuxt (Vue) app with a python back end. I also thought about to download the canvas via back end and return it to the client(browser) -> but I have no experience in web-scraping.</p>
  
  <p>How would you solve this problem? </p>
  
  <p>Any help is highly appreciated!</p>
  
  <p>Thank you so much</p>
  
  <p>Edit: When I copy the SVGs code from the browser-dev-tools I get the following:</p>
  
  <pre><code>&lt;svg width="411.25" height="376.25" class="chart" id="svg-chart3"&gt;&lt;g transform="translate(206.125,173.125)"&gt;&lt;defs&gt;&lt;filter id="glow"&gt;&lt;feGaussianBlur stdDeviation="2.5" result="coloredBlur"&gt;&lt;/feGaussianBlur&gt;&lt;feMerge&gt;&lt;feMergeNode in="coloredBlur"&gt;&lt;/feMergeNode&gt;&lt;feMergeNode in="SourceGraphic"&gt;&lt;/feMergeNode&gt;&lt;/feMerge&gt;&lt;/filter&gt;&lt;/defs&gt;&lt;g class="axisWrapper"&gt;&lt;circle class="gridCircle" r="128.125" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/circle&gt;&lt;circle class="gridCircle" r="106.77083333333334" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/circle&gt;&lt;circle class="gridCircle" r="85.41666666666667" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/circle&gt;&lt;circle class="gridCircle" r="64.0625" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/circle&gt;&lt;circle class="gridCircle" r="42.708333333333336" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/circle&gt;&lt;circle class="gridCircle" r="21.354166666666668" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/circle&gt;&lt;text class="axisLabel" x="4" y="-128.125" dy="0.4em" fill="#737373" style="font-size: 10px;"&gt;6&lt;/text&gt;&lt;text class="axisLabel" x="4" y="-106.77083333333333" dy="0.4em" fill="#737373" style="font-size: 10px;"&gt;5&lt;/text&gt;&lt;text class="axisLabel" x="4" y="-85.41666666666667" dy="0.4em" fill="#737373" style="font-size: 10px;"&gt;4&lt;/text&gt;&lt;text class="axisLabel" x="4" y="-64.0625" dy="0.4em" fill="#737373" style="font-size: 10px;"&gt;3&lt;/text&gt;&lt;text class="axisLabel" x="4" y="-42.708333333333336" dy="0.4em" fill="#737373" style="font-size: 10px;"&gt;2&lt;/text&gt;&lt;text class="axisLabel" x="4" y="-21.354166666666668" dy="0.4em" fill="#737373" style="font-size: 10px;"&gt;1&lt;/text&gt;&lt;g class="axis"&gt;&lt;line x1="0" y1="0" x2="8.629932912741504e-15" y2="-140.9375" class="line" style="stroke: white; stroke-width: 2px;"&gt;&lt;/line&gt;&lt;text class="legend" text-anchor="middle" dy="0.35em" x="9.806741946297165e-15" y="-160.15625" style="font-size: 11px;"&gt;&lt;tspan x="9.806741946297165e-15" y="-160.15625" dy="0.35em"&gt;Opportunity/Bid&lt;/tspan&gt;&lt;tspan x="9.806741946297165e-15" y="-160.15625" dy="1.75em"&gt;Support- Banking&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="axis"&gt;&lt;line x1="0" y1="0" x2="90.59287874019664" y2="-107.96438870208097" class="line" style="stroke: white; stroke-width: 2px;"&gt;&lt;/line&gt;&lt;text class="legend" text-anchor="middle" dy="0.35em" x="102.94645311385982" y="-122.68680534327382" style="font-size: 11px;"&gt;&lt;tspan x="102.94645311385982" y="-122.68680534327382" dy="0.35em"&gt;Webauftritt&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="axis"&gt;&lt;line x1="0" y1="0" x2="138.79634269015807" y2="-24.473540039933" class="line" style="stroke: white; stroke-width: 2px;"&gt;&lt;/line&gt;&lt;text class="legend" text-anchor="middle" dy="0.35em" x="157.72311669336145" y="-27.810840954469317" style="font-size: 11px;"&gt;&lt;tspan x="157.72311669336145" y="-27.810840954469317" dy="0.35em"&gt;Produktschulung&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="axis"&gt;&lt;line x1="0" y1="0" x2="122.05545534586933" y2="70.46874999999997" class="line" style="stroke: white; stroke-width: 2px;"&gt;&lt;/line&gt;&lt;text class="legend" text-anchor="middle" dy="0.35em" x="138.69938107485152" y="80.07812499999997" style="font-size: 11px;"&gt;&lt;tspan x="138.69938107485152" y="80.07812499999997" dy="0.35em"&gt;Produkt Marketing&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="axis"&gt;&lt;line x1="0" y1="0" x2="48.20346394996145" y2="132.43792874201395" class="line" style="stroke: white; stroke-width: 2px;"&gt;&lt;/line&gt;&lt;text class="legend" text-anchor="middle" dy="0.35em" x="54.776663579501644" y="150.49764629774313" style="font-size: 11px;"&gt;&lt;tspan x="54.776663579501644" y="150.49764629774313" dy="0.35em"&gt;Sales Enablement&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="axis"&gt;&lt;line x1="0" y1="0" x2="-48.20346394996143" y2="132.43792874201398" class="line" style="stroke: white; stroke-width: 2px;"&gt;&lt;/line&gt;&lt;text class="legend" text-anchor="middle" dy="0.35em" x="-54.77666357950163" y="150.49764629774316" style="font-size: 11px;"&gt;&lt;tspan x="-54.77666357950163" y="150.49764629774316" dy="0.35em"&gt;Opportunity/Bid&lt;/tspan&gt;&lt;tspan x="-54.77666357950163" y="150.49764629774316" dy="1.75em"&gt;Support&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="axis"&gt;&lt;line x1="0" y1="0" x2="-122.0554553458693" y2="70.46875000000004" class="line" style="stroke: white; stroke-width: 2px;"&gt;&lt;/line&gt;&lt;text class="legend" text-anchor="middle" dy="0.35em" x="-138.6993810748515" y="80.07812500000006" style="font-size: 11px;"&gt;&lt;tspan x="-138.6993810748515" y="80.07812500000006" dy="0.35em"&gt;Funnel und&lt;/tspan&gt;&lt;tspan x="-138.6993810748515" y="80.07812500000006" dy="1.75em"&gt;Contract (Change)&lt;/tspan&gt;&lt;tspan x="-138.6993810748515" y="80.07812500000006" dy="3.15em"&gt;Mngt.&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="axis"&gt;&lt;line x1="0" y1="0" x2="-138.79634269015807" y2="-24.47354003993295" class="line" style="stroke: white; stroke-width: 2px;"&gt;&lt;/line&gt;&lt;text class="legend" text-anchor="middle" dy="0.35em" x="-157.72311669336145" y="-27.810840954469263" style="font-size: 11px;"&gt;&lt;tspan x="-157.72311669336145" y="-27.810840954469263" dy="0.35em"&gt;Configuration&lt;/tspan&gt;&lt;tspan x="-157.72311669336145" y="-27.810840954469263" dy="1.75em"&gt;Mngt.&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="axis"&gt;&lt;line x1="0" y1="0" x2="-90.59287874019665" y2="-107.96438870208095" class="line" style="stroke: white; stroke-width: 2px;"&gt;&lt;/line&gt;&lt;text class="legend" text-anchor="middle" dy="0.35em" x="-102.94645311385983" y="-122.6868053432738" style="font-size: 11px;"&gt;&lt;tspan x="-102.94645311385983" y="-122.6868053432738" dy="0.35em"&gt;Channel Partner&lt;/tspan&gt;&lt;tspan x="-102.94645311385983" y="-122.6868053432738" dy="1.75em"&gt;Mgmt.&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="radarWrapper"&gt;&lt;path class="radarArea" d="M0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0" style="fill: rgb(255, 99, 132); fill-opacity: 0.35;"&gt;&lt;/path&gt;&lt;path class="radarStroke" d="M0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0" style="stroke-width: 2px; stroke: rgb(255, 99, 132); fill: none; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="radarWrapper"&gt;&lt;path class="radarArea" d="M0,0C3.504958148741365,10.059064645456237,14.865331955788124,-7.267139905040352,21.02974889244819,-3.7081121272625763C27.194165829108258,-0.14908434948480087,36.83968219673499,10.702971558940018,36.9865016199604,21.354166666666654C37.13332104318581,32.00536177439329,30.509600749771913,57.06930201697533,21.910665431800663,60.19905851909725C13.311730113829414,63.32881502121917,-4.790915779240255,46.60685432146993,-14.607110287867098,40.13270567939817C-24.42330479649394,33.65855703732641,-28.90614555504748,29.89700701019766,-36.98650161996039,21.354166666666682C-45.066857684873305,12.811326323135704,-66.96596465591887,-4.8389351519371715,-63.08924667734458,-11.124336381787701C-59.21252869877029,-17.40973761163823,-24.241068194738745,-7.535213442734456,-13.726193748514646,-16.358240712436505C-3.2113193022905495,-25.181267982138554,-2.287698958085774,-66.78887345207275,0,-64.0625C2.287698958085774,-61.33612654792725,-3.504958148741365,-10.059064645456237,0,0" style="fill: rgb(57, 110, 255); fill-opacity: 0.35;"&gt;&lt;/path&gt;&lt;path class="radarStroke" d="M0,0C3.504958148741365,10.059064645456237,14.865331955788124,-7.267139905040352,21.02974889244819,-3.7081121272625763C27.194165829108258,-0.14908434948480087,36.83968219673499,10.702971558940018,36.9865016199604,21.354166666666654C37.13332104318581,32.00536177439329,30.509600749771913,57.06930201697533,21.910665431800663,60.19905851909725C13.311730113829414,63.32881502121917,-4.790915779240255,46.60685432146993,-14.607110287867098,40.13270567939817C-24.42330479649394,33.65855703732641,-28.90614555504748,29.89700701019766,-36.98650161996039,21.354166666666682C-45.066857684873305,12.811326323135704,-66.96596465591887,-4.8389351519371715,-63.08924667734458,-11.124336381787701C-59.21252869877029,-17.40973761163823,-24.241068194738745,-7.535213442734456,-13.726193748514646,-16.358240712436505C-3.2113193022905495,-25.181267982138554,-2.287698958085774,-66.78887345207275,0,-64.0625C2.287698958085774,-61.33612654792725,-3.504958148741365,-10.059064645456237,0,0" style="stroke-width: 2px; stroke: rgb(57, 110, 255); fill: none; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="radarWrapper"&gt;&lt;path class="radarArea" style="fill: rgb(142, 199, 44); fill-opacity: 0.35;"&gt;&lt;/path&gt;&lt;path class="radarStroke" style="stroke-width: 2px; stroke: rgb(142, 199, 44); fill: none; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="radarWrapper"&gt;&lt;path class="radarArea" style="fill: rgb(255, 155, 78); fill-opacity: 0.35;"&gt;&lt;/path&gt;&lt;path class="radarStroke" style="stroke-width: 2px; stroke: rgb(255, 155, 78); fill: none; filter: url(&amp;quot;#glow&amp;quot;);"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="radarCircleWrapper"&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;/g&gt;&lt;g class="radarCircleWrapper"&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="3.922696778518866e-15" cy="-64.0625" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="21.02974889244819" cy="-3.708112127262575" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="36.9865016199604" cy="21.354166666666657" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="21.91066543180066" cy="60.19905851909725" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="-14.6071102878671" cy="40.13270567939817" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="-36.98650161996039" cy="21.35416666666668" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="-63.08924667734458" cy="-11.124336381787705" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;circle class="radarInvisibleCircle" r="4.5" cx="-13.726193748514644" cy="-16.358240712436505" style="fill: none; pointer-events: all;"&gt;&lt;/circle&gt;&lt;/g&gt;&lt;g class="radarCircleWrapper"&gt;&lt;/g&gt;&lt;g class="radarCircleWrapper"&gt;&lt;/g&gt;&lt;text class="tooltip" style="opacity: 0;"&gt;&lt;/text&gt;&lt;/g&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>I then create an image with <a href="https://github.com/exupero/saveSvgAsPng" rel="nofollow noreferrer">saveSvgAsPng</a> and place it on my canvas.</p>