SVG Code is 21k chars. Work around to embed?

Design help Custom code
1

Ello, ello!

As the title suggests I’ve been working on a svg animation for a client. Unfortunately there are a ton of paths & I can’t embed as I normally would. What’s the best way to get round this?

Here’s what I’m working with - https://codepen.io/smallio/pen/xXNjNr
Unfortunately I can’t post the site due to the contract!

Cheers,
Will

P.S. Please increase the custom code (or at least embed) limit! It’s the only thing stopping me from working entirely in webflow for small projects.

2

Only known workaround:

How to host text files on Github

(SVG is a HTML tag)

4

See step #3 and step #7

(If it’s HTML code, file extension has to be html)

5

Sorry just saw that before you replied, skipped over the raw part.

Got that now so I have this in the embed & nothing is showing up. I’m assuming I don’t need the script tags or something then?

<html>
<script src="https://gist.githubusercontent.com/smallio/15e3238eb8a197fe7b33d8501d619bc2/raw/76210d45d95cf8c07e5634e067ada53505679cc6/cstlogo.html"></script>
</html>

Thanks,
Will

6

Use 2a or 2b depending on the document type.

In the example, ajaxContent is the ID of an element on your page that you want to insert the contents of the HTML file into. <div id="ajaxContent"></div> is included in the first line of code for those who are using an embed code component at the exact location of the place to insert the content. This is optional and you can use any other element on the page with the same ID as the one in the jQuery selector on line 6 $('#ajaxContent').append(data);

Also, feel free to contact me for further code help and/or customization of third-party plugins

2 Likes
7

Works flawlessly. You’re slowly becoming one of my favourite people on the planet. <3

Thank you for everything dude :slight_smile:

1 Like
8

:+1:

           

9

Hey @samliew

Much like Smallio, I’m trying to Embed an SVG which I’ll be controlling via Vue.js but the codes over 30,000 characters.

I’ve done everything you’ve recommended between this and a couple other of your threads and I’ve looks over the code from Chrome dev tools and the code looks like it should work but still no luck. Can you take a luck and see what I’m doing wrong? Find my code and links below.

<svg id="checkup-hex-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 637.88649 695.56807"></svg>

var Webflow = Webflow || []; Webflow.push(function() { $.get('https://cdn.rawgit.com/IronMarketGroup/72692b8d04b9a50b7983b4177c407606/raw/011874307353765a665c10bf874f371216a5e9f4/financial-checkup-hex.html', function(data) { $('#checkup-hex-svg').append(data); }); });

Development link: http://ironmarketgroup.webflow.io/

R/O link: https://preview.webflow.com/preview/ironmarketgroup?preview=cb858705174666c8c3b59d2f6ae256b8

Cheers!

10

@samliew

Never mind, I’ve included the whole SVG file and just set the ID on a div instead. All good pal, thanks for the detailed walkthrough.

11

This and the other linked thread were so helpful! Thanks @samliew for the awesomeness

1 Like