Graphics (svg and gif)

[grebe (Urs Graber)]

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!

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

[h_classen (Hans-Gerd Claßen)]

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.

Rotating a scaled SVG, the SVG will get blurry

I can reproduce this – this seems to be a browser issue with scaled SVGs which are also rotated on the Y axis. To avoid this, resize your SVG using the resize handles. Please note that if you hold down command it will ‘scale’ your SVG, which is what is triggering this problem. This example document shows the difference: SVG Test.zip (53.3 KB) If you have an SVG that can’t be resized using this method, it has a ‘viewbox’ which can be removed with the tool referenced on this thread: Scale SVG in…

[jonathan (Jonathan Deutsch)]

e 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.

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 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?

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.

[grebe (Urs Graber)]

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
Urs

[MaxZieb (Loves Hype)]

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:

[grebe (Urs Graber)]

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

[h_classen (Hans-Gerd Claßen)]

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

[MaxZieb (Loves Hype)]

Bei einer Vektor-Grafik aber dennoch ein seltsames Vorgehen

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.