Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
SoloAnt

Squarespace SVG Logo

Recommended Posts

Why can't you add a svg logo to squarespace? I'm not finding anything that gives any details to why this can't happen or how to make it happen. Seems pretty standard these days to be able to use svg.

This post seems to be missing code or something that may possibly work but I'm unable to see what is really being said.https://answers.squarespace.com/questions/25757/how-do-i-replace-a-png-logo-with-an-svg.html

ThanksSol

Edited by SoloAnt

Share this post


Link to post

Hi octopus I did see your post and tried adding the css you posted but that didn't work. I'm currently testing out majave I'm not seeing html.svg #header h1.site-title a{} from the inspector so I tried changing it based on the logo wrap for majave. Or is html.svg #header h1.site-title a {} standard throughout squarespace? Or is there something else I'm missing?

This seems like it should be the easiest thing to do and it's not, not even for and experienced web designer. First time trying out squarespace I've been using Wordpress for the last 8+ years.

Share this post


Link to post

Hi octopus I did see your post and tried adding the css you posted but that didn't work. I'm currently testing out majave I'm not seeing html.svg #header h1.site-title a{} from the inspector so I tried changing it based on the logo wrap for majave. Or is html.svg #header h1.site-title a {} standard throughout squarespace? Or is there something else I'm missing?

This seems like it should be the easiest thing to do and it's not, not even for and experienced web designer. First time trying out squarespace I've been using Wordpress for the last 8+ years.

Share this post


Link to post

Hi octopus I did see your post and tried adding the css you posted but that didn't work. I'm currently testing out majave I'm not seeing html.svg #header h1.site-title a{} from the inspector so I tried changing it based on the logo wrap for majave. Or is html.svg #header h1.site-title a {} standard throughout squarespace? Or is there something else I'm missing?

This seems like it should be the easiest thing to do and it's not, not even for and experienced web designer. First time trying out squarespace I've been using Wordpress for the last 8+ years.

Share this post


Link to post

Hi octopus I did see your post and tried adding the css you posted but that didn't work. I'm currently testing out majave I'm not seeing html.svg #header h1.site-title a{} from the inspector so I tried changing it based on the logo wrap for majave. Or is html.svg #header h1.site-title a {} standard throughout squarespace? Or is there something else I'm missing?

This seems like it should be the easiest thing to do and it's not, not even for and experienced web designer. First time trying out squarespace I've been using Wordpress for the last 8+ years.

Share this post


Link to post

I was thinking the themes were built with the same selectors (basically skins) and thinking that squarespace was a more out of the box solution especially for people who don't know anything about web. I'm looking for the quickest way to put a portfolio together and don't want to tinker with theme files or too much css and someone suggested squarespace so I thought I'd tryout the free trial and then something as simple as a svg logo issue slowed me down. A png 24 logo was still to pixelated looking for me so thought hey simple svg logo fix, but not so easy with this platform at least for the time being. The thing I find the most strange is they seem use svg logos for social icons and other icons why not logos?

Anyways,I got it working once I started digging through the Css to find the correct selectors but again thought the themes were more or less built the same way and from the other comments in the forums, it seems that quite a lot of people are confused about this very thing regardless of their web experience or not.

Thanks again for at least putting up at a starting point to make it work for the time being.

Share this post


Link to post

I'm finding that out more and more. Overall the platform is really cool, I'm just really familiar with wordpress at this point so I'm still debating if I'll end up using it over this. I'll play with this over the next couple days then make my decision. Thanks again for the help.

Share this post


Link to post

Other solutions: (Others did not work for myself)

  1. Add a transparent logo with the same dimensions as the .svg
  2. Add a new unlisted page as a link, under files, upload the .svg
  3. Once completed, it will display the slug for the file e.g. /s/logo.svg. Add this to the end of the website's URL and copy the new URL that displays (Without the 'https:'), e.g. "//static1.squarespace.com/static/58f00e2b579fb33532808b88/t/58f8306cd2b8571e9b705453/1492660332667/logo.svg"
  4. Design > Custom CSS and insert/edit:

.Header-branding-logo { width: 100%; background-image: url( PASTE THE SVG URL HERE );}

.Mobile-bar-branding-logo { width: 195px; background-image: url( PASTE THE SVG URL HERE );}


To edit the width of the logo, adust the numerical value by width.

Hope this helps :)

Edited by fmcpherson
Initial Revision

Share this post


Link to post

@fmcpherson was right (or at least got me on the right track)

Here's how I was able to use an SVG logo:

  1. Open PAGES and click the + symbol across from NOT LINKED, select Link.
  2. Input a Link Title and then select Click to add URL...
  3. Select Files tab and then Add a File
  4. Browse for and select your SVG logo, click Open (might be different for your OS or browser)
  5. Click SAVE
  6. Hover your cursor over your newly created Link page and click on the GEAR icon
  7. Select the Link URL, should look something like "/s/logo.svg"
  8. Click outside the modal or select CANCEL
  9. Now select the Home link at the top and then click on DESIGN
  10. Select Custom CSS
  11. Copy and paste the following in the input field:


.Header-branding-logo { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); }

.Mobile-bar-branding-logo { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); }

===

(OLDER TEMPLATE)

.site-title img { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); }


I included the sites full URL but you might be able to get away without it (SEE @fmcpherson ANSWER). Don't forget to set the width and/or height specific to your needs.

Cheers.

Edited by risforraccoon
Initial Revision

Share this post


Link to post

This worked when I added "a.site-title-link" to the css (don't forget the comma preceding it), like so:

.Header-branding-logo, a.site-title-link { width: 100%; background-image: url( PASTE THE SVG URL HERE ); }

.Mobile-bar-branding-logo, a.site-title-link { width: 195px; background-image: url( PASTE THE SVG URL HERE ); }

(I am using the Galapogos theme) :)

Edited by La-Luna-Branding
Initial Revision

Share this post


Link to post

risforraccoon thanks for posting the code for the older template. This worked for me in Alex.

One thing I had to do in addition: after adding in the code below, and pasting the SVG logo URL where indicated, I had to go into Design > Logo & Title and add a transparent png. I did this because both my old png logo and the svg logo was showing up, I guess since the code was still calling for both; an empty transparent png saved at the size I wanted my logo was my work around.

(OLDER TEMPLATE)

.site-title img { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); }

Share this post


Link to post

To use an SVG logo in header for Squarespace template Alex:

  1. You'll want to add some text (any word will do) to a page.
  2. Select the text and click the link icon.
  3. Click the Files tab.
  4. Click Add a File.
  5. Upload the SVG logo file. Save.
  6. Click the text link you've just created and copy the URL code of the page where you SVG file is shown.
  7. Paste the URL within the following code:

    .site-title img { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); }

  8. Place complete code in Design>Custom CSS. Save and reload page.

  9. If multiple versions of your logo is showing up in the header, go to Design> Logo & Title and upload an empty transparent PNG. Save and reload the page

  10. Delete the word link you initially made, you won't need it anymore.

Hope this helps consolidate threads for Alex template users.

Share this post


Link to post

Brilliant!After uploading the blank png it this finally works.But this is only for the site-title img.

  1. What code do I have to add/change to use svg's this way, for several other icons or svg-images anywhere on a site?

(I got this kind of working via Markup, but then on mobile the svg takes the whole screen. So how do I adjust the required sizes for svg's somewhere else on the site?)

  1. Is it possible to add several svg's into Design/ Custom CSS/ Manage Custom Files/ Add images? And if so, how to refer to these url's?

Thanks sofar!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...