Find answers, ask questions, and connect with our
community around the world.

Activity Forums Web Design How on earth do I properly position and scale svg’s inside of containers ?

  • How on earth do I properly position and scale svg’s inside of containers ?

    updated 2 weeks, 2 days ago 0 Member · 1 Post
  • FrederickDanzoy

    Member
    October 28, 2019 at 1:32 am

    Ok, so I’m new to web design I’m building my first ever website and I’ve been banging my head for the last day with some svgs. After reading this article: https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners–cms-30844 and a dozen more + watching 10 videos on the subject I THINK I have an idea of how it all works but for the life of me I still can not get it to work on the website. Here is a snippet of the code I have, stripped from any styles: https://jsfiddle.net/5rsygu82/ This is a demo of the website https://cmi-bg.netlify.com/ in case you need the full picture. I’m using bootstrap for the grid/layout. Basically for the website the goal is to have 2 rows of cards. Each card should hold an svg icon in it.I want each card to be an even width , say 225px. The problem I have is inserting the svg icons and properly scaling them/positioning them. In the JS fiddle I have inserted 3 icons at the bottom of the body of the document. I’m then linking to these 3 icons in the first row of my layout in the cards . I’ve set the width to all cards in the css file to be 225px. For the first 3 cards I’ve adjusted the svg width height & viewBox to values that KINDA fit, this is the only approach I seem to have any success with. The problem with this is it’s not exact and for each icon I have to manually adjust the viewBox of it and results vary. Is this what I need to do? If so, can anyone explain the logic behind as the 3 icons are different and I need to understand how to get the perfect values for each. The next 3 icons I’m not adjusting anything, they’re just imported as is, as you can see that’s the default look of the icons, one of them doesn’t evne show up. You can ignore the second row. it’s just repeating the same icon again. Also, for some reason in the jsfiddle 2 of my imported icons in the document are appearing at the bottom at fullscale, not sure why. Can anyone please explain what sorcery I need to use to scale them in to the cards and for it to be responsive? – by hq overview Vuccappella – –

Reply to: FrederickDanzoy
Your information:

Cancel
Original Post
0 of 0 posts June 2018
Now