Inlining svgs

Top Contributor

Is there a method for outlining svgs that have been uploaded as images?

 

This would be for both css svg assets such as custom bullet images and for common images such as header logos and footer social icons.

10 Replies 10
Community Manager

Hey @matttunney - thanks for your question! Could you confirm what you mean/want to acheive by 'outlining'?

Reply
0 Upvotes
Top Contributor

Hi @roisinkirby,

To explain futher...

At the moment the file manager allows a user to upload an svg file, for example a twitter logo.

It can then be referenced as an image source in a landing page, blog, or module.

<img src="my-twitter-logo.svg" />

Each image request is a separate network request, if we could inline all or selected svgs, that would reduce network request, improving page performance.

 

By inlining I mean taking the file contents of an svg (which is just markup) an placing that directly in the html.

So

<img src="my-twitter-logo.svg" />

would become

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><title>ui-twitter</title><circle cx="25" cy="25" r="24" fill="none" stroke="#1da1f2" stroke-miterlimit="10"/><path d="M21.475,33.554a12.236,12.236,0,0,0,12.32-12.32c0-.188,0-.374-.012-.56a8.81,8.81,0,0,0,2.16-2.242,8.6..." fill="#1da1f2"/></svg>

 

Regular Contributor

 

I second this. Inline the svg would be a great funcion indeed, otherwise if we want to access the svg functionality we have to embedd them directly into the code.

SLV
Occasional Contributor

Hi folks,

 

I am brand new to HubSpot COS. But I wanted to reply here and let you know I was able to add a SVG of our logo as the site logo in Content Settings. I don't know about whether it's possible to use SVG art as graphic elements elsewhere, and I don't think this speaks to your question about inlining SVGs, but it's evident that SVG is at least somewhat supported in the COS.

 

Screen Shot 2018-01-30 at 3.14.11 PM.pngScreen Shot 2018-01-30 at 3.15.07 PM.png

Highlighted
Regular Contributor

Sure, you can easily do that, but we are talking about "inlining".

If you enbed the svg that way, you wont be able to access to the path ad animate them like I did on this page https://www.cloudnova.it/

As today, you can only accomplish this by manually copy-paste the svg code to the template itself.

 

 

cloudnova-hubspot-agency.PNG

Occasional Contributor

+1 million.

 

Inline SVGs are the bees-knees, and the current way of handling them makes me feel dirty.


When adding an SVG to the the file manager, having a checkbox to inline the svg versus serving the file would be rad. Or this could be on a per page image component instance.

 

Taking it a step further, SVG Symbols feel like you have super powers.

 

This isn't a deal breaker — but hot **bleep**, it would open up a lot more possibilities with the benefits of proper content management compared to the current fragile one-off method of inlining.

LPM
Top Contributor

Gonna assume this was never picked up by support then? It's such a shame because the options you have regarding animation and colours makes it so much more flexible.

Reply
0 Upvotes
Top Contributor

You will most likely want to play around with this hubl function – file_by_id.

 

{% set svg =  file_by_id(123) %}
{# then pretty print the object to see what you can do with it #}
{{ svg|pprint }}

 

It can probably be used like the php way to do what you are wanting to achieve

 file_get_contents('http://example.com/logo.svg')

 

Only here you would need to retrieve the file's id ( the only way I know is through the files api ). I haven't tested it... so this might be bad advice lol

New Contributor

John, your solution doesn't work. The function "file_by_id(123)" does not return the svg code, but metadata.

 

The only solution is to create a module (e.g. "logo-svg"). Insert a text field inside (e.g. "svg_code"). Put a default svg code inside if you want (it gives the default logo of the portal). Then, in the "HUBL+HTML" window, write de field (e.g. "{{ svg_code }}"). Then put your wrapper in html around. You can also add a field to give size and insert it in your code (html or css or js). When you insert this logo in a template, you will have the svg code.

 

You won't use the default logo given in Hubspot settings of your portal, but you will be able to do whatever you want with svg code in css directives.

 

Regards.

Reply
0 Upvotes
New Contributor

Hi! 

The work-around I found to outline SVGs is to open them in a browser, inspect the code, then copy and paste this code into the Hubspot HTML. Then I was able to apply css to change the color, size, etc. 

 

Hope this is helpful to someone!