CODEWITHSUNDEEP
htmlcsssvg
user3284707
user3284707

Reputation: 3351

How to make SVG larger

I have some SVG images from a third party, like the below snippet.

enter image description here

Can I amend these to have a default larger size? I.e. I would like these to be 256px x 256px ideally, rather than the 64px they are at the moment.

I've tried style="transform: scale(4,4)" but this doesn't look right, but almost what i'm after, it's just not aligned correctly.

enter image description here

The reason I am asking is that I am using these within an image tag, and these go blurry on Iphone when I resize them to be bigger, I am thinking this may be due to the images being stretched from their original size? I might be wrong with this, but thought it was possible.

See this post below for the full issue of what is happening to these images when displayed on iphone.

Any help would be really appreciated.

SVG used as image is blury on iphone

<svg
    xmlns="http://www.w3.org/2000/svg" width="64" height="64">
    <radialGradient id="a" cx="25.875" cy="24.504" r="31.893" gradientTransform="matrix(1 0 0 1.003 0 .963)" gradientUnits="userSpaceOnUse">
        <stop offset=".4" stop-color="#f5000d"/>
        <stop offset=".618" stop-color="#f2010d"/>
        <stop offset=".758" stop-color="#ea040e"/>
        <stop offset=".877" stop-color="#db0a10"/>
        <stop offset=".984" stop-color="#c61213"/>
        <stop offset="1" stop-color="#c21413"/>
    </radialGradient>
    <path fill="url(#a)" d="M31.873 13.657C29.564 13.657 3 4.854 3 29.919 3 45.134 18.711 62 25.568 62c3.111 0 4.5-1.996 6.305-1.996 1.838 0 2.158 1.996 6.141 1.996C44.873 62 61 43.387 61 29.919c0-25.09-26.818-16.262-29.127-16.262z"/>
    <radialGradient id="b" cx="31.976" cy="15.973" r="12.221" gradientTransform="matrix(1 0 0 .4524 0 9.758)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#b30100"/>
        <stop offset="1" stop-color="#c21413" stop-opacity="0"/>
    </radialGradient>
    <path fill="url(#b)" d="M32 17.868c6.573 0 6.19-3.344 21.237-3.704-8.112-4.195-19.87-.507-21.364-.507-1.493 0-13.122-3.668-21.158.506 15.095.352 14.704 3.705 21.285 3.705z"/>
    <radialGradient id="c" cx="284.948" cy="-516.148" r="13.633" gradientTransform="matrix(1.0508 -.1028 -.1778 -1.0674 -373.088 -493.67)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#ff4f42"/>
        <stop offset="1" stop-color="#ff4f42" stop-opacity="0"/>
    </radialGradient>
    <path fill="url(#c)" d="M32.453 26.574c-1.338-8.037-8.838-13.924-16.747-13.149-7.915.773-13.245 7.914-11.907 15.951 1.34 8.038 8.84 13.925 16.752 13.15 7.913-.772 13.242-7.915 11.902-15.952z"/>
    <path fill="#449C00" d="M31.56 13.63C46.364 15.757 50.227 2.135 50.227 2.135S35.926 8.678 31.56 13.63z"/>
    <path fill="#56AB15" d="M31.56 13.63C36.563 9.247 50.227 2.135 50.227 2.135S34.22-.101 31.56 13.63z"/>
    <path fill="#785647" d="M32.67 17.868c-2.549-2.545-1.67-12.114.279-12.114 3.227 0-2.388 3.311-.279 12.114z"/>
</svg>

Upvotes: 0

Views: 97

Answers (1)

Rob Moll
Rob Moll

Reputation: 3453

I made it 256px X 256px by adding viewbox settings and setting height and width to 256px.

viewbox settings MDN

<svg
    viewBox="0 0 64 64"
    xmlns="http://www.w3.org/2000/svg" width="256px" height="256px">
    <radialGradient id="a" cx="25.875" cy="24.504" r="31.893" gradientTransform="matrix(1 0 0 1.003 0 .963)" gradientUnits="userSpaceOnUse">
        <stop offset=".4" stop-color="#f5000d"/>
        <stop offset=".618" stop-color="#f2010d"/>
        <stop offset=".758" stop-color="#ea040e"/>
        <stop offset=".877" stop-color="#db0a10"/>
        <stop offset=".984" stop-color="#c61213"/>
        <stop offset="1" stop-color="#c21413"/>
    </radialGradient>
    <path fill="url(#a)" d="M31.873 13.657C29.564 13.657 3 4.854 3 29.919 3 45.134 18.711 62 25.568 62c3.111 0 4.5-1.996 6.305-1.996 1.838 0 2.158 1.996 6.141 1.996C44.873 62 61 43.387 61 29.919c0-25.09-26.818-16.262-29.127-16.262z"/>
    <radialGradient id="b" cx="31.976" cy="15.973" r="12.221" gradientTransform="matrix(1 0 0 .4524 0 9.758)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#b30100"/>
        <stop offset="1" stop-color="#c21413" stop-opacity="0"/>
    </radialGradient>
    <path fill="url(#b)" d="M32 17.868c6.573 0 6.19-3.344 21.237-3.704-8.112-4.195-19.87-.507-21.364-.507-1.493 0-13.122-3.668-21.158.506 15.095.352 14.704 3.705 21.285 3.705z"/>
    <radialGradient id="c" cx="284.948" cy="-516.148" r="13.633" gradientTransform="matrix(1.0508 -.1028 -.1778 -1.0674 -373.088 -493.67)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#ff4f42"/>
        <stop offset="1" stop-color="#ff4f42" stop-opacity="0"/>
    </radialGradient>
    <path fill="url(#c)" d="M32.453 26.574c-1.338-8.037-8.838-13.924-16.747-13.149-7.915.773-13.245 7.914-11.907 15.951 1.34 8.038 8.84 13.925 16.752 13.15 7.913-.772 13.242-7.915 11.902-15.952z"/>
    <path fill="#449C00" d="M31.56 13.63C46.364 15.757 50.227 2.135 50.227 2.135S35.926 8.678 31.56 13.63z"/>
    <path fill="#56AB15" d="M31.56 13.63C36.563 9.247 50.227 2.135 50.227 2.135S34.22-.101 31.56 13.63z"/>
    <path fill="#785647" d="M32.67 17.868c-2.549-2.545-1.67-12.114.279-12.114 3.227 0-2.388 3.311-.279 12.114z"/>
</svg>

Upvotes: 2

Related Questions