How to add padding to your svg

Updated: 11th September 2024
Tags: svg html

Sometimes you need to trim whitespace. For this task there are already working online services. But for adding padding - is not. It actually not very hard, but info about it is not easy to find.

For example, you have SVG like this:

<svg xmlns="http://www.w3.org/2000/svg"
    aria-label="CSS3" role="img"
    viewBox="0 0 512 512">
    <path fill="#264de4"
        d="M72 460L30 0h451l-41 460-184 52" />
    <path fill="#2965f1"
        d="M256 37V472l149-41 35-394" />
    <path fill="#ebebeb"
        d="m114 94h142v56H119m5 58h132v57H129m3 28h56l4 45 64 17v59L139 382" />
    <path fill="#fff"
        d="m256 208v57h69l-7 73-62 17v59l115-32 26-288H256v56h80l-5.5 58Z" />
</svg>

svg

I will add background, so we can easily see changes:

<svg xmlns="http://www.w3.org/2000/svg"
    aria-label="CSS3" role="img"
    viewBox="0 0 512 512">
    <rect width="100%" height="100%" fill="#000000" />
    <path fill="#264de4"
        d="M72 460L30 0h451l-41 460-184 52" />
    <path fill="#2965f1"
        d="M256 37V472l149-41 35-394" />
    <path fill="#ebebeb"
        d="m114 94h142v56H119m5 58h132v57H129m3 28h56l4 45 64 17v59L139 382" />
    <path fill="#fff"
        d="m256 208v57h69l-7 73-62 17v59l115-32 26-288H256v56h80l-5.5 58Z" />
</svg>

svg_with_background

So to add padding, we will increase viewbox and every path variable to start.

For each path markup, I will add transform="translate(100,100)".
The viewBox must be increased by 200 (100+100). So it will be viewBox="0 0 712 712"
Use your values, as 100, 100 I chose for demo purposes.

Here result:

<svg xmlns="http://www.w3.org/2000/svg"
    aria-label="CSS3" role="img"
    viewBox="0 0 712 712">
    <rect width="100%" height="100%" fill="#000000" />
    <path transform="translate(100,100)" fill="#264de4"
        d="M72 460L30 0h451l-41 460-184 52" />
    <path transform="translate(100,100)" fill="#2965f1"
        d="M256 37V472l149-41 35-394" />
    <path transform="translate(100,100)" fill="#ebebeb"
        d="m114 94h142v56H119m5 58h132v57H129m3 28h56l4 45 64 17v59L139 382" />
    <path transform="translate(100,100)" fill="#fff"
        d="m256 208v57h69l-7 73-62 17v59l115-32 26-288H256v56h80l-5.5 58Z" />
</svg>

svg_with_background_and_padding