Converting SVG to SVG and replacing viewBox

[Konstantin Bulenkov <kb...@jetbrains.com.INVALID>]

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

Re: Converting SVG to SVG and replacing viewBox

[Helder Magalhães <he...@gmail.com>]

Hello Konstantin,

Because SVG is vector graphics, you don't have to resize the whole contents
but only the viewBox, as you've already stated.
In this case, Batik would be overkill in my opinion: a simple XML
manipulation workflow would be sufficient:

   1. open SVG (XML) document;
   2. read 'viewBox' attribute;
   3. possibly to some maths;
   4. edit 'viewBox' attribute;
   5. save document.

One might use Batik XML interfaces, of course, but it might be even simpler
to use a "plain" XML parser - such as TinyXML or pugixml (where there's a
nice benchmark <https://pugixml.org/benchmark.html> comparison with many
more, if there are performance-related goals involved).

Hope this helps,
Helder


Konstantin Bulenkov <kb...@jetbrains.com.invalid> escreveu no dia quinta,
11/03/2021 à(s) 19:47:

> 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
>
>
>