Submitted 9 months ago

order summary component

Ahmad Hassan• 310

@Ahmadhassan0

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I tried everything to change SVG image size but none of them is working, I also changed the width="48" and height="48" in SVG tag but it's also not working

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
            <g fill="none" fill-rule="evenodd">
              <circle cx="24" cy="24" r="24" fill="#DFE6FB" />
              <path fill="#717FA6" fill-rule="nonzero"
                d="M32.574 15.198a.81.81 0 00-.646-.19L20.581 16.63a.81.81 0 00-.696.803V26.934a3.232 3.232 0 00-1.632-.44A3.257 3.257 0 0015 29.747 3.257 3.257 0 0018.253 33a3.257 3.257 0 003.253-3.253v-8.37l9.726-1.39v5.327a3.232 3.232 0 00-1.631-.441 3.257 3.257 0 00-3.254 3.253 3.257 3.257 0 003.254 3.253 3.257 3.257 0 003.253-3.253V15.81a.81.81 0 00-.28-.613z" />
            </g>
          </svg>

Can you tell me how I can change the size?

Community feedback

M• 920

@Dev-MV6

Posted 9 months ago

Remember you can also experiment with transform: scale() to resize SVG elements.

Marked as helpful

Ahmad Hassan• 310

@Ahmadhassan0

Posted 9 months ago

@Dev-MV6 Thanks It's working🙌 I was thinking there is no way to deal with svg image😄

Neitodesu• 180

@Neitodesu

Posted 9 months ago

I'm not too familiar with messing with svgs but you could always throw it inside an <img> tag and resize from that

Marked as helpful

Ahmad Hassan• 310

@Ahmadhassan0

Posted 9 months ago

@Neitodesu Thanks It's working fine in <img> tag but I think it's hard to directly deal with svg.................it took my more than 5 hours to find a solution that works 😅

Ahmad Hassan• 310

@Ahmadhassan0

Posted 9 months ago

@Neitodesu Someone told me I can resize svg image through transform = scale(); property.

And It also works perfectly🙂

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord