Graphics (svg and gif)

Hi to all
I have two questions:
The first one it’s about svg-graphics: I have a graphic which looks good when I open this directly in IE11. But a HTML5-Banner looks bad, when I open the banner in IE11.
For me, it looks like, Hype is doing something with the svg-graphic.
I tried to output the svg-file in different ways form Adobe-Illustrator, but with no success.

The second question is about the export in a gif-file.
Directly exported from Hype, I got a file size about 1.7 MB.
When I open the 1.7 MB file in Adobe Photoshop and export the file again, the file size goes down to 116 KB.
Why is Hype not able, to export the gif-file in 116 KB?

Thanks a lot for your help! :slight_smile:

To document my questions, I upload the files.
To have a look to the banners, here is the Link: (300.0 KB)

does a

transform: translateZ(0)

on svg’s help for ie?

edit: you scaled up the div including the svg as a backgroundimage. Resizing may work better for ie.

You have a scale factor fo 700% on your SVGs. IE 11 uses bitmap-style scaling instead of re-rendering when using the CSS transform:scale() setting that this corresponds to. Instead, use 100% scaling for the image and change its width/height to be what you want. Then it will be rendered smoothly by IE 11.

When I exported your animation as a GIF, the size I got was 654 KB; I’m not sure why yours is much larger unless the settings are different than the ones that were left saved in the document.

Regardless, Hype by default uses a program called ImageMagick to produce animated GIFs. Making animated GIFs in many ways is more of an art form that takes into account many different settings of the format; it is probably just the case that Photoshop is more intelligently looking at the content and making better choices. Hype has a hidden preference to use Apple’s Animate GIF engine, but I found the results weren’t significantly better with that. My recommendation would be to simply continue using photoshop or drag into ImageOptim after exporting with Hype.

Hi Hans-Gerd, hi Jonathan
Thanks you both for your answers.
I tried the transform “thing” -> without success. So I’ll working with biger svg-graphics.
With the gif-animations, I’ll continue using photoshop.
Thanks again and all the best

1 Like

Lustig! Habe vor ein paar Jahren die Jeti-Kampagne für die ePost gemacht (publicis Berlin bzw. dann Pixelpark).

Mag daran liegen das die Bilder als SVG-Bild eingelegt werden durch Hype. Sprich in HTML sind es keine direkten SVG sondern Hintergrundbilder (background-image).

Update: Hier mal ein paar Screenshot von dem Job (728x90), waren aber mehr Formate:

Danke auch dir für deine Rückmeldung MaxZieb
Witzig! Ich bin zwar bei der Schweizerischen Post, aber die Unternehmen unterscheiden sich von Land zu Land wohl nicht wesentlich. Die Vergrösserung der Grafiken hat geholfen. Bei einer Vektor-Grafik aber dennoch ein seltsames Vorgehen :slight_smile:

Ich hatte die Hinweise von Daniel in deinem Dokument angewendet und die Ergebnisse waren OK.

Augenscheinlich aber nicht wirklich, da Hype die Vorteile von SVG nicht wirklich nutzt. Besonders den “scalable” Aspekt. Das liegt daran das Hype SVG als Hintergrund-Bild einsetzt. Damit cached der Browser das SVG als Bitmap in der notwendigen Größe.

1 Like