Aaron Jackson   |   Designer
AARON JACKSON

Blog

Dealing with SVG files in Squarespace

How to Resize & Align SVG Code

In this tutorial we are going to show you how to successfully place Scalable Vector Graphics (SVG) code into the Squarespace code block, then resize and align the SVG image as you desire. See a live example.

The reason we recommend SVG icons or graphics in Squarespace is to avoid the blurryness PNG's produce while viewing on a mobile device. Unlike pixel based images (ie PNG, JPG etc), SVG's cannot get blurry because of their scalability. There are few things as frustrating as blurry graphics/icons on a mobile device when they look great on a desktop. Well, SVG to the rescue!

As you may have already experienced, when you paste the exported SVG code from Adobe Illustrator CC, into the code block section of Squarespace, the SVG imports at a larger size than desired, creating a really awkward and very crisp image floating in your web page. In order to avoid this, follow the instructions below accompanied by GIF tutorials.

1. First, launch Adobe Illustrator CC (Ai), and open the SVG file you have created in Ai.


2. In the Nav bar of Ai select File-->Save As--> in the Format drop down choose "SVG (svg)--> click "OK"


3. The SVG Options window will appear, and under the SVG Profiles drop down, select "SVG TINY 1.1"


4. Ensure that the "embedded" option is selected.


5. Instead of clicking "OK" at the bottom, we click on the button labeled "SVG Code.." located at the bottom of SVG Option window


6. Then we select the portion of the code beginning with <svg all the way to the end </svg>


7. Copy selected code 

See GIF 1.0 below

GIF 1.0

GIF 1.0

 

Now we need to login into our Squarespace website and navigate to the page we want to place the SVG code into. When you have navigated to the correct page, follow these instructions accompanied with the GIF 2.0 tutorial.

GIF 2.0

GIF 2.0

1. When we are on the page that needs changes, enter "Edit mode" by clicking on the edit button at the top of the page.


2. Roll mouse over the content where the SVG needs to be placed and select the dark grey "Handle" that appears. Be sure to select the "Handle" with the correct length of arm, otherwise it is a bit more tricky placing the SVG.


3. The editing options window appears, scroll down to the "MORE" section and select the block titled "Code </>"


4. An "EDIT CODE" window appears, this is where we paste the SVG code we copied from Ai, once pasted, click SAVE.
 

Once the code is pasted in the "EDIT CODE" window you immediately see the incredibly crisp and awkwardly large SVG image doing everything you don't want it to do! To solve the size and placement we will make some minor edits to the SVG code.

Toward the beginning of the code there is a line that writes viewBox="0 0 50 50", these are essentially the coordinates for aligning and sizing the SVG file and the four numbers vary depending on the SVG.  As seen in GIF 2.0 we pasted a set coordinate, "-30 0 115 50" to replace the default coordinates that were imported with the SVG. 

Each of the four coordinates have separate functions which are described below;

y x

For explanation sake we have labeled each coordinate as a, b, c, and d. Note that the functionality of each coordinate is loose and typically requires custom adjusting.

a.   Adjusts the placement of the image on the X axis (horizontal).

  • Numbers 0 and above move the image left.
  • Numbers below zero (ie -30) adjust placement of image to the right.

b.   Adjusts placement of image on the Y axis (vertical).

  • Numbers 0 and above move image up
  • Numbers below 0 move image down

c. Controls the size of the image

  • Numbers 0 and above decrease the size of image
  • Numbers below 0 increase size of image
  • *Note typically numbers below zero are usually not useful

d. Moves the surrounding content up or down along the Y axis.

  • Numbers 0 and above move surrounding content down
  • Numbers below 0 move content up 

Thanks for reading and hope this helps, now go enjoy using SVG's in Squarespace to your hearts content! Let us know how it goes for you and if you have any comments or questions add them below.

Cheers!

 

 

 

 

Aaron Jackson18 Comments