CODEWITHSUNDEEP
htmlcsssvg
NickW
NickW

Reputation: 1343

Sizing an existing svg

I'm trying to learn how to deal with an existing svg properly so that I can align it with text.

This is how I (probably naively) understand things so far:

viewport - the area of the canvas that I can see on my screen, set by the width/height attributes in the svg tag or css.

viewBox - defines panning and scale within that viewport.

Usually it seems that your svg height/width should match your viewBox, but the following example makes me think that the size of the vector itself (or path i guess) matters. I've no problem manipulating the circle because I set its size.

Do I just have to finely tune the viewBox of the icon until it is centered and the correct size? Or is there a better way I don't know about?

Thanks!

Upvotes: 1

Views: 132

Answers (1)

enxaneta
enxaneta

Reputation: 33044

I'm not very sure I understand your question. Maybe this helps: In JavaScript there is a method getBBox()that returns the size and position of a rectangle circumscribing the current element. In your example if I'm putting this in the JavaScript:

let thepath = document.querySelector("path");
console.log(thepath.getBBox());

I get SVGRect {x: 0, y: 1, width: 15, height: 15}. This is the size and the position of the icon. You can center the icon by changing the viewBox="-42.5 -42 100 100"or by translating the icon using CSS: path{transform:translate(42.5px,42px)

Upvotes: 3

Related Questions