Need help fixing proportions of SVG in XML/CSS

I’m building a typing indicator for my app. It’s an animated SVG that I hope to place inside a group that will be hidden/shown (and properly scaled) where needed. I know nothing about SVG CSS other than what I learned while trying this (below).

Problem: The typing indicator I need is rectangular but its SVG is square, so the SVG has empty space above and below the “image” and I can’t understand how to edit the SVG to make it rectangular so it will scale properly in my app.

Capture

What I’ve done:

  • Started with “rotating circles” SVG that I downloaded from some site a couple years ago.
  • Edited the SVG with a text editor to get the animated circles the proportions/colors I want, but they are still centered in a square SVG.
  • Added a “text bubble”/rectangle behind the circles with correct proportions, but it too is centered in the square SVG.

What I tried:

  • Using Bubble image uploader to crop the SVG does not actually change the SVG…just adds another “view”?
  • Editing the SVG’s height/width/viewBox/preserveAspectRatio attributes but got completely lost this is where I need help

What should the correct values of these attributes be so the SVG has the proportions of “What I need”?

<svg
width=“169px”
height=“169px”
xmlns=“SVG namespace
viewBox=“0 0 100 100”
preserveAspectRatio=“xMidYMid”
class=“lds-ellipsis”
style=“background:none;”>

Here is the link to the SVG.

Here is a Sample App Editor: Typingindicatortest | Bubble Editor

Well, in looking at this, it looks like you’re telling it to be a square. What happens if you shrink the height to something like 60px?

Thanks for looking!

When you just adjust the height, it scales to that new height, keeping the proportions.

It’s the nature of/reason for Scalable VGs, I just don’t understand enough about how all those settings work together to work it out!!

Here you go: //s3.amazonaws.com/appforest_uf/f1552584017935x671292158212950300/TypingIndicator1.svg

I used Inkscape to resize the whole document:

Thanks so much @jaos.pcl! This works perfectly!

I too was fumbling around Inkscape but only know as much about it as I do CSS, which is basically zero!

Happy to help!

This topic was automatically closed after 70 days. New replies are no longer allowed.