Can I upload a SVG file to the image block?

When I try to add my .svg file as an image block I get an error message that only images are allowed. How can I add a .svg?

Not 100% sure if it will work, but why not convert the svg to png? I don't really mess with SVG files, but I do know there are conversions out there.

converting the svg to png is simple, an image converter can slove all your problem. already find for you, hope it helps.

Perfect. Thanks.

I just wanted to comment that this worked very well for me....thanks! BTW, have you tried it copying ALL the code of the SVG? For me it was just one extra line at the very top but I've never tried it myself

That line of code was

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

On 11/2/2012 at 8:05 AM, avsmithy said:

No. However you can upload the SVG code into a code block. Open the SVG in a text editor and copy everything from

<svg...

 

 

to

</svg> 

 

 

(inclusive).

This method worked for me, I've wasted the past 3 hours trying to convert my SVGs into font families and found out SquareSpace doesn't allow users to upload .svgs

If you're looking to use custom .svg icons made from illustrator (after image tracing), just right click your .svg file and "open with >" the notepad.

After that, just simply copy and paste the entire <svg> text from the notepad and paste it into a code block or markdown block.

The <svg> text allows you to control the width and height of the svg image itself.

On 12/9/2019 at 8:06 PM, alvinroypak said:

This method worked for me, I've wasted the past 3 hours trying to convert my SVGs into font families and found out SquareSpace doesn't allow users to upload .svgs

If you're looking to use custom .svg icons made from illustrator (after image tracing), just right click your .svg file and "open with >" the notepad.

After that, just simply copy and paste the entire <svg> text from the notepad and paste it into a code block or markdown block.

The <svg> text allows you to control the width and height of the svg image itself.

I don't why I didn't get it, it just posted as texts...

On 11/3/2012 at 2:05 AM, avsmithy said:

No. However you can upload the SVG code into a code block. Open the SVG in a text editor and copy everything from

<svg...

 

 

to

</svg> 

 

 

(inclusive).

This is a f**n incredible solution! Thank you, thank you!

Follow this article: https://www.sitepoint.com/why-hosting-your-svgs-is-hard-and-how-to-beat-it/

TL'DR: hosting SVGs is difficult because its usually a security issue for the hostler, alternatively you can upload your SVG as a gist on github, then link it into your webpage as an using an HTML code block:

<div id="example">
     <img src="https://gist.githack.com/CleanWetGrass/afab65de2aaf30d326c64f9a3cde22d5/raw/7c87266f3cb437b8f60b6d1c47fc9e9372d00ce1/DrLCA-v01.svg">
</div>

Then you can target that "example" in the design tab, and reformat it with CSS

```

OR you can link it into the background by adding custom CSS in the Design page like this:

#blockID body {
       background-image: url("https://gist.githack.com/CleanWetGrass/afab65de2aaf30d326c64f9a3cde22d5/raw/7c87266f3cb437b8f60b6d1c47fc9e9372d00ce1/DrLCA-v01.svg");
}
 

OR you can do the whole page/setting/advance/inject code and inject the HTML as a background that way, but that is usually easier with the landing page than index page. So better to avoid the issues iMO

EDIT: also I meant to say, you can do the button methods mentioned above but they are cumbersome in my opinion, when you can just throw it in a gist