Hello everyone,

What's a proper way to convert an SVG image file and replace its viewBox
size, and then save?

For example, loading 32x32 svg file, and save it as 16x16.

input:

<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg";>
    <g>
        <circle cx="16" cy="16" r="14" fill="url(#circle)"/>
    </g>
    <defs>
        <linearGradient id="circle" x1="18.566" y1="9.59518"
x2="19.9182" y2="26.4673" gradientUnits="userSpaceOnUse">
            <stop offset="0.0998726" stop-color="#087CFA"/>
            <stop offset="0.4602" stop-color="#079AF6"/>
            <stop offset="0.8454" stop-color="#07C3F2"/>
        </linearGradient>
    </defs>
</svg>

output (using Figma):

<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg";>
    <path d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8
1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z"
fill="url(#paint0_linear)"/>
    <defs>
        <linearGradient id="paint0_linear" x1="9.283" y1="4.79759"
x2="9.9591" y2="13.2336" gradientUnits="userSpaceOnUse">
            <stop offset="0.0998726" stop-color="#087CFA"/>
            <stop offset="0.4602" stop-color="#079AF6"/>
            <stop offset="0.8454" stop-color="#07C3F2"/>
        </linearGradient>
    </defs>
</svg>

My first attempt was to use SVGGraphics2D with loaded svg document and
then change svgCanvasSize. However, I got invalid file with missing
defs and invalid formatting.

Thank you in advance for any help.

Konstantin

Reply via email to