Replace icon PNG's with SVG's

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. 



 

8 minutes ago, NPC3000 said:

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. 



 

What icons are you trying to replace? 

Just some bespoke icons that denote services that a product offers

14 minutes ago, NPC3000 said:

Just some bespoke icons that denote services that a product offers

Okay, so you could use an embed block to embed your SVG icons. 
 

Sqaurespace doesn’t natively support SVG images/icons

If you have your SVG already open it using notepad and grab the code and past it into the embed block.

alternatively if you can find icons you like that have embed codes, copy the code and paste it in an embed block.

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. 

1 hour ago, NPC3000 said:

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. 

SVG's do keep their quality, however you'd need to manually change the size of the SVG in the embed code. 

Look for this section of code

viewBox="-4 -4 32 32" 

-4 -4: This specifies the x (horizontal plane) and y (vertical plane) coordinates of the viewBox. 

32 32: This specifies the width and height of the viewBox.

Mess around with all of these to come up with the perfect combination for your icons. 
 

Let me know if this has worked 🙂

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>

19 minutes ago, NPC3000 said:

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>

What is the url to your site? 

If you add the SVG where you want it, I'll see what needs to be done using the dev tools, and can amend the embed code for you.

www.voqa.com

7 minutes ago, NPC3000 said:

www.voqa.com

 

Just checked out your website, and the icons look okay. 

What were you looking to do? make it smaller or larger?

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. 

11 minutes ago, NPC3000 said:

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. 

Using SVG's means you aren't bogging down your website with large image files. And i've had a second look. It does seem to be quite fuzzy. 

Are these not SVG's

if not and you want to use the SVG's I have amended your above code to;

<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="-15 -15 60 60"
     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>

The view box is now viewBox="-15 -15 60 60" which has made the SVG smaller. 

If you want the svg to be slightly larger, decrease the 60 60 to 50 50 etc. Then change the -15 -15 to -10 -11. this should keep things centre aligned. 

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. 

6 minutes ago, NPC3000 said:

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. 

Try this code

.code-block { padding: 0 !important; }

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

26 minutes ago, NPC3000 said:

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

Try this;
 

If you want to remove the padding only for specific code blocks, you can add a class or an ID to those code blocks and target them specifically in your CSS. For example:

<pre class="no-padding">Your SVG code here</pre>

And then in below the <pre> </pre>  add the following css

<style>

pre.no-padding {

  padding: 0;

}

</style>

This approach allows you to selectively remove the padding from specific code blocks while leaving others untouched.

Note that removing the internal padding might affect the readability or formatting of your code blocks, so you may need to adjust other styles, such as font size, line height, or background colors, to maintain a clean and readable appearance.

The only other thing I can recommend is you add me as an admin so that I can play around with the SVG's to get them to the size you want and placement that you want.