Might be me, but I cannot seem to find a good document explaining SVG objects. Or how to start one from scratch. I was having an issue with text not scaling between a desktop and a mobile application. Saw I could do an SVG as text. I ended up copying an object from another project.
Is there a guide explaining the settings?
I was able to create some text, but when I go to my mobile app, the text scales but the container seems to chop off the end.
Looking for some guidance.
SVG I referenced:
Referenced Settings:
What I created:
Small screen (Bad):
Large Screen (Good):
Found this post. Some good info on the forum.
Perspective SVG Question
Are each of those square + text combos in their own containers and their own svg image? Or are there 3 svgs inside of one container?
Looks almost like overflow is set to hidden and when it starts to scale them down the svg doesn't scale with the container and cuts it off. You might be able to set the overflow to visible if that is what is causing it to be cut off.
Also were the svgs embedded images?
You could also keep the icon as an svg and set up a label for the text that changes size relative to the width of the viewport or screen.
For the simple shapes you are using there you can just use the built-in label component. Leave the text field blank, set the background color with a binding and set the corner radius property. To be a bit cooler you can apply a subtle gradient to the fill.
See more on How to make the circle icon as in image in perspective. (A circle is a square with 50% border radius.)
I think your margins are pushing your SVG over the boundary and overflow is being hidden.
That said, you'll have a lot more control over how things render if you handle simple rounded box indicators like this with CSS styles on a label as @Transistor is suggesting. Styled labels perform as well as SVGs so there's no reason to use SVGs for that.
It's really awkward controlling how SVGs will render when embedded with standard objects as containers are resized because the view box stretches and the SVG gets scaled based on the smallest size and it floats within the viewbox based on the configuration in one of the properties.
There's a time and place for SVGs but this is a situation where they will make create layout hassles for you that can easily be avoided.
