Inlining svgs

[matttunney]

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.

[roisinkirby]

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

[matttunney]

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>

[matteocloudnova]

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]

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.

[matteocloudnova]

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.

[ringo-at-wt]

+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]

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.

[John]

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

[sylvain_pref]

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.

[iperceptions]

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!

[squatchcreative]

I had each SVG already separated in a new file with a .html extensions and using PHP I was using something like

<?php include('/my/SVG/file.html'); ?>

That kept my markup clean but still called the SVG's inline so I could style them.

Here's what I did...

In Design Manager, I made a folder for my SVGs.  I then created a new file "HTML + Hubl" file in the folder and made it a "Template Partial - Global Partial".  I copy/pasted the SVG code in that file (which in some cases you may need to remove the XML declaration at the beginning of the file depending on how your SVG was made).

Then, to call it I used:

{% include "/Path/To/That/SVG/FileYouMade.html" %}

To find that path, you can simply right click the file and hit "Copy Path".

You can also use this to call it:

{% global_partial path="/MeS 2020/Assets/Images/SVG/partners2.html" %}

however that wraps it in a <div> tag, which was undesireable for me.

If you have a bunch of SVGs (and again, depending on how they were made and if they have XML declarations in them), you can simply rename each extension from .svg -> .html, use an FTP editor to upload them to the folder in your Design Manager, and then call each one using the aforementioned code. 

Hope this helps!