Streaming live at 10am (PST)

Embed code has a max length. Is there an alternative for long snippet?


#1

site: https://preview.webflow.com/preview/s10pizza?preview=21cf6a982c9a2b0fa35fe1749b012536

I have an SVG that I'd like to animate, the way I want to accomplish this is by adding Classes within the SVG (I want to animate elements within the SVG, not the SVG as a whole).

Unfortunately, the SVG is too long to live in the Embed code (widget?).
Although it's only 148 lines, many of those lines are uber long (I've run the SVGO minimizer on it and still too long).
The Embed truncates the code, the code still functions, but cuts off the word that is to be output (you can see in the first section as compared to the SVG image in the Nav)

I can add the SVG as an image, give it a class and have my way with it, but I want to animate the individual elements within the SVG (as I write this, I'm wondering if it would make sense to cut up the SVG into several pieces and then add several Embedded codes...that might work, but it would be much easier if there wasn't a character cap on the Embedded code -- the SVG text file is about 91k, as I notice this I will want to shrink it, but that's beside the point).

...what options am I looking at to animate the elements of an SVG, is using the Embed widget the best method?

thanks,
Mike


#2

Can't you work your SVG and anims in an external software and bring a full animated svg file into Webflow?


#3

Hi @misterkak, just a quick comment, the hard limit for custom code is 20k characters. It does not matter what kind of custom code you use, that is the limit currently.

I would strongly recommend doing the svg animation in a tool designed for that, and then export to an svg file and upload that to Webflow smile

Cheers,
Dave


#4

Inkscape is a reference for designers and coders in term of SVG work. I just realized reading the following article that Adobe Edge Animate can export animated SVGs... that's pretty awesome. If you have an Adobe CC subscription, you should try it out, the UI is neat.

http://smashinghub.com/5-svg-animation-tools-to-make-creating-svg-much-easier.htm


#5

Thanks @cyberdave and @vincent -- I'm looking forward to playing with those 5 tools!

BTW @vincent I've attempted Inkscape in the past (based on a recommendation you made in another post) but I've haven't been able to get it to open successfully (running Mac with Yosemite).
It installs with X-Quartz helper app, but I can't actually open Inkscape, it's just a skeleton, there is just a top menu with no actionable items.

cheers,
Mike


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.