I just learned all this tonight while dealing with the same issue. Simply follow the standard instructions above, then play around with the first 2 values of the viewBox property to gain an understanding of how those values shift the image along the x and y axes. + If the padding around your svg has different amounts for the top / bottom and right / left, this is not a problem. + Our opening svg tag should now reflect these changes. Change the viewBox attribute accordingly, and add our actual width and height. + Our initial dimensions were 48 x 48 and our actual dimensions (sans padding) are 40 x 40. Change the svg attributes to reflect this. For this example, the actual dimensions are 40 x 40. + We'll assume you've been able to complete step #1 and determine the "actual" dimensions of your svg without padding. If you'd like to walk through this exact example, just wrap all of the code below in HTML tags svg code and open in your browser. This example will make it extremely simple, and will use the svg directly below as reference. In simpler (CSS) terms, your left margin and your top margin. These will respectively be changed (from what was likely 0 0) to: half of the difference between the initial width and height and the actual width and height. The 1st and 2nd dimensions are the x and y coordinates for the "origin" of the portion of the svg that is within the viewBox.We'll start with the 3rd and 4th numbers, which will again be your "actual" width and height.Change the 4 dimensions of the viewBox attribute.Change the width and height attributes to the "actual" dimensions you determined in step #1.You'll be changing the code within the svg element tag only. Now edit the svg code directly in your text / code editor of choice. If there are multiple path elements, I've found the last one is often the "containing" element.You'll see the width and height displayed next to the actual svg in your browser. For me, this was easiest to do by using the (Chrome) inspector and hovering over the path element within the inspector. Step by Step: Remove "padding" (surrounding white space) directly within SVG codeĭetermine the "actual" size of your svg without padding. None of these answers (and multiple similar/duplicates) seemed to completely answer this and provide an example.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |