jdanyow · November 11, 2023 04:43
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Path fitter</title>
  <style>
    form {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    label {
      font-weight: bold;
    }
    
    textarea {
      padding: 8px;
    }
    
    output {
      border: 1px solid gray;
      border-radius: 2px;
      padding: 8px;
      white-space: pre;
      font-family: monospace;
      overflow: auto;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/pathfit.js"></script>
  <script>
    function resize(event) {
      event.preventDefault(); 
      
      const textarea = document.getElementById('svg_textarea');
      const dimensionInput = document.getElementById('dimension_input');
      const output = document.getElementById('output');
      const outputImage = document.getElementById('output_image')
      
      try {
        // parse svg markup
        const template = document.createElement('template');
        template.innerHTML = textarea.value;
        const svg = template.content.querySelector('svg');
        
        // get viewbox
        const { x, y, width, height } = svg.viewBox.baseVal;
        const viewBox = `${x} ${y} ${width} ${height}`;
        
        // get path
        const path = template.content.querySelector('svg path');
        let d = path.getAttribute('d');
        
        // scale
        const dim = dimensionInput.valueAsNumber;
        const pathfitter = new Pathfit({ viewBox }, undefined, d);
        d = pathfitter.scale_with_aspect_ratio(dim, dim);
        
        // output
        const markup = `<svg  xmlns="http://www.w3.org/2000/svg" viewbox="0 0 ${dim} ${dim}">
  <path d="${d}" />
 </svg>`;
        output.textContent = markup;
        outputImage.src = `data:image/svg+xml;charset=utf-8,${encodeURI(markup)}`;
        outputImage.hidden = false;
      }
      catch(err) {
        output.textContent = String(err?.stack ?? err);
      }
    }
    
    window.addEventListener('load', () => {
      document.querySelector('form').addEventListener('submit', resize);
      const textarea = document.getElementById('svg_textarea');
      textarea.value = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M505.67 107.12 404.87 6.32a21.6 21.6 0 1 0-30.54 30.55l12.25 12.25-58.9 58.9-51.07-51.08a21.6 21.6 0 1 0-30.54 30.54l23.55 23.56L71.08 309.58a21.6 21.6 0 0 0 0 30.54l35.13 35.13-99.88 99.88a21.6 21.6 0 1 0 30.54 30.54l99.88-99.88 35.13 35.13a21.6 21.6 0 0 0 30.54 0l198.54-198.54 23.56 23.55a21.6 21.6 0 1 0 30.54-30.54l-51.07-51.08 58.9-58.9 12.24 12.26a21.6 21.6 0 1 0 30.54-30.55zM187.15 395.11l-70.26-70.26 28.52-28.51 18.32 18.32a21.6 21.6 0 0 0 30.54-30.54l-18.32-18.33 17.3-17.3 18.33 18.32a21.6 21.6 0 1 0 30.54-30.54l-18.32-18.33 17.3-17.3 18.33 18.32a21.6 21.6 0 1 0 30.54-30.54l-18.32-18.32 28.52-28.52 70.25 70.25-183.27 183.28zm186.3-241.34-15.22-15.22 58.9-58.9 15.21 15.23-58.9 58.9z"/>
 </svg>`;
    });
  </script>
 </head>
 <body>
  <form>
    <label for="svg_textarea">SVG Text</label>
    <textarea id="svg_textarea" rows="5"></textarea>
    
    <label for="dimension_input">Target viewbox width/height</label>
    <input id="dimension_input" type="number" min="1" step="1" value="16" />
    
    <button type="submit">Resize</button>
    
    <label for="output">Result</label>
    <output id="output"></output>
    
    <img id="output_image" alt="Output image" hidden />
  </form>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Path fitter</title>
	<style>
	form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	}

	label {
	font-weight: bold;
	}

	textarea {
	padding: 8px;
	}

	output {
	border: 1px solid gray;
	border-radius: 2px;
	padding: 8px;
	white-space: pre;
	font-family: monospace;
	overflow: auto;
	}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/pathfit.js"></script>
	<script>
	function resize(event) {
	event.preventDefault();

	const textarea = document.getElementById('svg_textarea');
	const dimensionInput = document.getElementById('dimension_input');
	const output = document.getElementById('output');
	const outputImage = document.getElementById('output_image')

	try {
	// parse svg markup
	const template = document.createElement('template');
	template.innerHTML = textarea.value;
	const svg = template.content.querySelector('svg');

	// get viewbox
	const { x, y, width, height } = svg.viewBox.baseVal;
	const viewBox = `${x} ${y} ${width} ${height}`;

	// get path
	const path = template.content.querySelector('svg path');
	let d = path.getAttribute('d');

	// scale
	const dim = dimensionInput.valueAsNumber;
	const pathfitter = new Pathfit({ viewBox }, undefined, d);
	d = pathfitter.scale_with_aspect_ratio(dim, dim);

	// output
	const markup = `<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 ${dim} ${dim}">
	<path d="${d}" />
	</svg>`;
	output.textContent = markup;
	outputImage.src = `data:image/svg+xml;charset=utf-8,${encodeURI(markup)}`;
	outputImage.hidden = false;
	}
	catch(err) {
	output.textContent = String(err?.stack ?? err);
	}
	}

	window.addEventListener('load', () => {
	document.querySelector('form').addEventListener('submit', resize);
	const textarea = document.getElementById('svg_textarea');
	textarea.value = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<path d="M505.67 107.12 404.87 6.32a21.6 21.6 0 1 0-30.54 30.55l12.25 12.25-58.9 58.9-51.07-51.08a21.6 21.6 0 1 0-30.54 30.54l23.55 23.56L71.08 309.58a21.6 21.6 0 0 0 0 30.54l35.13 35.13-99.88 99.88a21.6 21.6 0 1 0 30.54 30.54l99.88-99.88 35.13 35.13a21.6 21.6 0 0 0 30.54 0l198.54-198.54 23.56 23.55a21.6 21.6 0 1 0 30.54-30.54l-51.07-51.08 58.9-58.9 12.24 12.26a21.6 21.6 0 1 0 30.54-30.55zM187.15 395.11l-70.26-70.26 28.52-28.51 18.32 18.32a21.6 21.6 0 0 0 30.54-30.54l-18.32-18.33 17.3-17.3 18.33 18.32a21.6 21.6 0 1 0 30.54-30.54l-18.32-18.33 17.3-17.3 18.33 18.32a21.6 21.6 0 1 0 30.54-30.54l-18.32-18.32 28.52-28.52 70.25 70.25-183.27 183.28zm186.3-241.34-15.22-15.22 58.9-58.9 15.21 15.23-58.9 58.9z"/>
	</svg>`;
	});
	</script>
	</head>
	<body>
	<form>
	<label for="svg_textarea">SVG Text</label>
	<textarea id="svg_textarea" rows="5"></textarea>

	<label for="dimension_input">Target viewbox width/height</label>
	<input id="dimension_input" type="number" min="1" step="1" value="16" />

	<button type="submit">Resize</button>

	<label for="output">Result</label>
	<output id="output"></output>

	<img id="output_image" alt="Output image" hidden />
	</form>
	</body>
	</html>