Answers for "how to make svg responsive css"

2

responsive svg image in html

/* responsive svg */
/* NOTE: remove default width and height and replace it with values in viewbox */
<svg version="1.1" viewBox="0 0 500 500">
	<circle fill="#F7941E" stroke="#231F20" stroke-width="10" 
	cx="250" cy="250" r="200" opacity="0.6" />
</svg>
Posted by: Guest on May-20-2020
0

responsive svg with bootstrap

.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
Posted by: Guest on September-24-2020
0

how to make responsive svg

const svg = document.querySelector('svg');

svg.style.height = `${window.innerHeight}px`;
window.addEventListener('resize', () => { // for every screen resize, the svg height remains 100% relative to the window height
  svg.style.height = `${window.innerHeight}px`;
  console.log(window.innerWidth)
});
Posted by: Guest on September-24-2021

Browse Popular Code Answers by Language