Best Way to Upload an Illustrator File to Squarespace

SVG files look sharp at all screen resolutions, take super pocket-size file sizes, and tin exist edited and modified using lawmaking. These files are commonly used for website logos to keep the image crisp no matter what device or browser a person is viewing your website on.

What an SVG is & Why You lot Should be Using it

Scalable Vector Graphics (SVG) are spider web-friendly vector images. Files in this format apply an XML-based text format to describe how the image should appear. Because text is used to describe the graphic, a SVG file can exist scaled to dissimilar sizes without losing quality, unlike a PNG or JPG file.

PNG file (left) vs. SVG file (right)

With PNG or JPG files you are restricted to pixels. You would use a PNG file when you require transparency in your images. Transparency in an image requires a large file size. The larger the file size, the slower the graphic is to load. When working with JPG files, you accept the choice of quality or compression. More compression gives y'all a smaller file size, but you lose image quality. SVGs files are just code, which means they can have a smaller file size and a quicker load fourth dimension.

Currently Squarespace just offers the option to add a .png or .jpg logo file. Simply in that location is a workaround! Squarespace doesn't make it easy, simply it is possible. Here's how yous can add together an SVG logo to the Logo/Title section of your Squarespace site.

How to Add an SVG Logo to Logo/Title Section of Your Squarespace Website

These instructions may vary depending on the template your website is using. For this case we used the Brine template.

ane. Add a Transparent PNG File

Hover over the page championship yous desire to add the SVG to and click edit. Add together a transparent PNG that is the same size as your .png or .jpg logo file.

2. Upload SVG

Upload the SVG file using the link editor.

1. On whatever page, select "edit" and add text to the page. You can remove this text later
2. Highlight the text and select the link icon from the toolbar
3. Click the gear icon in the URL box
4. From the popular-up window, select the "File" tab
5. Click Upload File to select the SVG file from your computer. You lot tin likewise drag and drop the file into the Upload File area
6. Once the file has uploaded click Save
7. In the link editor copy the URL to the SVG. It volition look like this /south/file-name.svg*
8. Click employ

*In some cases you may demand to add the full paradigm URL. It will be much longer and look like this:

https://static1.squarespace.com/static/602d8c67675bb40d4f-1b1fcb/t/602e9574f59fb32c9e67195c/1613665652987/file-name.svg

Y'all tin can find this URL by clicking on the link created to a higher place and copying/pasting the full URL from the browser window.

At present that the SVG file has been uploaded and the URL has been created the linked text can exist removed.

three. Add Custom CSS

Dorsum to the Home Menu, select Design, and so Custom CSS.

Insert the following code:

.Header-branding-logo {
background-repeat: no-repeat;
background-paradigm: url(PASTE IMAGE URL Here);
}

Notation:If you have the logo ready to display in the top centre of the screen you may find the logo appears slightly off-heart. To fix this you lot can add this line to the lawmaking above:

background-position:center;

The class or ID you are using as a selector will vary based on the template you are using. For this case we used the Brine template and the class is Header-branding-logo. You can detect the proper name of your logo's class or ID by correct-clicking on the logo in your template and selecting Audit Chemical element.

four. Adjust Size

The SVG file may upload at smaller size. Y'all can conform the width by going back to the Home Menu, select Design, and then Site Styles. Under Header: Branding at that place is a slider to increase the logo's width.

5. Add Mobile Logo

On near templates Squarespace uses a different class or ID to brandish the logo on mobile. What's frustrating about this is that Squarespace does not give you the option to upload a mobile logo anywhere on the site and then there is no existent way of knowing this… until you open your website on mobile and realize your SVG logo is not at that place.

If yous are using a different logo for mobile you lot'll need to repeat Step ii to upload this new logo. If you are using the same logo simply add the mobile class or ID to the Custom CSS you created in Step 3. For the Brine template the mobile class is .Mobile-bar-branding-logo.

.Mobile-bar-branding-logo {
background-repeat: no-echo;
background-image: url(PASTE IMAGE URL Hither);
}

Now your SVG logo will appear in the header of your website! You can balance easy knowing that your logo volition wait keen on any device.

kramerhationly.blogspot.com

Source: https://kickpoint.ca/how-to-add-an-svg-logo-to-your-squarespace-website/

Share this post