NPC3000

Thanks again but that didn't change anything. I used the SS id for it as well.

Thanks Justin, I really appreciate you taking the time to look into this for me. Thats an improvement, I can get the icon to a similar size to the png, however the bounding box is too big for that section. What is the solution? If I save the svg at a smaller size in illustrator it distorts.

I wanted to make the icons look as clean as possible, they look slightly fuzzy around the edges to me. I thought it was best practice to use svg's if possible.

www.voqa.com

Hi Justin, I couldn't get it to behave the way I wanted to unfortunately, if I change one aspect, the other messes up. Its so confusing. I just want to make the icon smaller and centre it within its bounding box. why is that so hard?!!! Below is the code snippet I am, working with. <svg version="1.2" baseProfile="tiny" id="Main_group" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" overflow="visible" xml:space="preserve"> <g> <path fill="#005C80" d="M15,0.1C6.8,0.1,0.1,6.8,0.1,15S6.8,29.9,15,29.9S29.9,23.2,29.9,15S23.2,0.1,15,0.1z M15,28.7 C7.5,28.7,1.3,22.5,1.3,15S7.5,1.3,15,1.3S28.7,7.5,28.7,15S22.5,28.7,15,28.7z"/> <path fill="#005C80" d="M15.5,4.5c-0.4,0.5-0.4,1.2,0.1,1.6c2.4,2.3,3.8,5.4,4,8.8s-1.1,6.6-3.3,9c-0.4,0.5-0.4,1.2,0.1,1.6 c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.9-0.4c2.7-2.9,4.1-6.7,4-10.6c-0.1-4-1.8-7.7-4.7-10.4C16.7,4.1,16,4.1,15.5,4.5z"/> <path fill="#005C80" d="M12.9,7.3c-0.5-0.4-1.2-0.4-1.6,0.1c-0.4,0.5-0.4,1.2,0.1,1.6c1.7,1.6,2.7,3.8,2.8,6.1 c0.1,2.3-0.7,4.6-2.3,6.3c-0.4,0.5-0.4,1.2,0.1,1.6c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.9-0.4c1.9-2.3,3-5,2.9-8 C16.3,12.1,15.1,9.3,12.9,7.3z"/> <path fill="#005C80" d="M7.1,10.1c-0.4,0.5-0.4,1.2,0.1,1.6c1,0.9,1.5,2.1,1.6,3.4c0.1,1.3-0.4,2.6-1.3,3.5C7,19.2,7,19.9,7.5,20.4 c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.9-0.4c1.3-1.4,2-3.2,1.9-5.2c-0.1-1.9-0.9-3.7-2.3-5C8.2,9.6,7.5,9.6,7.1,10.1z"/> </g> </svg>

Thanks Justin, what about resizing though? Should I save the svg at the pixel size that I want or resize with code? When I save the svg at a very small size it appears distorted when I open it. I thought Svg's kept their size and shape without distorting. Hence, why I'm pulling my hair out.

Just some bespoke icons that denote services that a product offers

Hi, I'd like to replace some png icons with svg's. What is the best practice for this? I've tried following Becka from inside the square's tutorial but I get nowhere with it. I can't get my icons to the size I want and I'm pulling my hair out. Any help would be much appreciated.

Hi Ziggy, I'm using 7.1. I adjust the screen size to each break point and then drag the text box and button containers to remove the added space. I start with small screens and work my way up. When I'm finished and reduce the screen size to check that everything is still spaced out as I want it, I find that there's more space added to the text boxes, buttons and section sizes. I'm going round in circles. I'll send the link in a private message. Thanks

Why does the spacing of sections, text boxes and buttons change every time I sort out the spacing at any break point? I fix the spacing at a smaller screen size, but when I expand to view larger screen sizes - ones that I had previously spaced correctly, I find that their spacing has expanded massively. What am I doing wrong??!