SVG: Resizing svg element

Posted on 12. December 2022 by admin

Sometimes there is a need to resize svg element by javascript. SVG image with pink background in the following example has initial “Fullsize” dimensions 1920×1080. SVGLength interface and more is described at https://developer.mozilla.org/en-US/docs/Web/API under letter S with prefix SVG . Initial width and height is resized to 200×100 in this code snippet.

<svg id="svg" width="1920" height="1080" style="background-color:pink" />
<script>
  let svg = document.getElementById('svg');
  svg.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX,200);
  svg.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX,100);
</script>
This entry was posted in workday and tagged . Bookmark the permalink.

Leave a Reply