Mysterious logo appearance (easy.. I'm sure :-(

Hi Folks, I am repurposing my Schools site for a new department which involves swapping out a logo - old (Innovation School) for new (Simulation and Visualisation). On static pages, this seems relatively straightforward, but I’ll be damned if I can work out how to work out where the ‘Innovation School’ logo top left of the overlay menu is being referenced in the code!!! - sure it’s simple… just can’t figure it out :frowning:

Any help greatly appreciated.

d.


Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

https://preview.webflow.com/preview/gsais-b86d2683127debd62e850ccca2e05442?utm_medium=preview_link&utm_source=designer&utm_content=gsais-b86d2683127debd62e850ccca2e05442&preview=abb11e3805321ab50ab4555b4f4a0106&workflow=preview

Hi Don,

Have you checked the code embed that is on some of the pages it looks like it’s being drawn with code and embedded for some reason rather than an image file, is it animated or something? Also might be the case on some of the collection pages.

Edit: I’ve uploaded a screen grab that shows the logo is being placed with a code embed, you can just use an SVG file rather than code in webflow, but I’m not sure if it’s been done like this to animate the vectors of the SVG?

Best wishes,
Sam

Hi @Sam_Sharpe - many thanks for taking the time to reply, much appreciated.

Yep, re. the SVG - I realised that is how the ‘main logo’ is rendered. I think it was done using an SVG so that colours could dynamically change depending on the department. I wasn’t aware this was also the case for the rollover menu - I’ll take a look!

1 Like

Hi Don,
You’re very welcome, if it is a colour change/animation on mouse over then perhaps rendering it out via after effects and Lottie may be an easier solution for basic interactions.

Best wishes,
Sam

@Sam_Sharpe thanks Sam - I did try lifting the SVG code from Illustrator, but Webflow is telling me there are too many characters in the file (limited to 10,000) - any suggestions as to how I could optimise?

@memetican - thanks again. This really is a great community - wonder if you have any experience re SVG elements. I did try lifting the SVG code from Illustrator, but Webflow is telling me there are too many characters in the file (limited to 10,000) - any suggestions as to how I could optimise?

You could split the SVG into a few 10,000 char chunks, put them in HTML Embeds and then merge the embeds with script.

But for you I think turning it into a Lottie JSON animation would be a far better choice.

1 Like

@jacobite what form of SVG are you exporting? I’m sure you know vectors are scalable and resolution independent but in case how complex is the graphic? Perhaps you can optimise either by rationalisation of points and their handles? Maybe have a look at the topology of the actual logo it may be the case that there is unnecessary overhead in the number of points in the original artwork depending on how it has been done? What is the file size?

@jacobite it would be really cool if your intention is to morph each logo for each department at the school via control of vectors in the viewport without loading? This is a great proof of concept for HTML and modern methods that was achievable in flash and I’d love to see the results, simple colour changes are easily done with many methods but some kind of blend shape animation without loading or overhead is definitely a proof of concept for HTML/CSS/JS as a solution years later than the easy simple methodology of macromedia foresight. Being able to use audio for interactive design is also another former paradigm that it’d be brilliant to use again.

1 Like