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".
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.
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.
mai 29, 20193:14 PM - editado jun 3, 20198:05 AM
Top colaborador(a) | Parceiro Platinum
Inlining svgs
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
I like kudos almost as much as cake – a close second.
set 12, 20196:58 AM - editado set 12, 20197:21 AM
Colaborador(a) | Parceiro
Inlining svgs
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.
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.
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.
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.
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.
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.
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.