• Export Svg File From After Effect Images
• Adobe After Effects Export
• Export Svg File From After Effect Video

To export a PNG file from After Effects, you have to add your composition to the Render Queue, change the render settings to PNG and then click on the Render button to save the file. This consumes plenty of time, especially when you are exporting multiple images. I'm curious if there's a way to export animations from Adobe After Effects to SVG containing SMIL. I'm currently using the tool Bodymovin, but that's limited to only exporting bloated JSON files and is depended on external scripts.

Should I use <img>, <object>, or <embed> for loading SVG files into a page in a way similar to loading a jpg, gif or png?

What is the code for each to ensure it works as well as possible? (I'm seeing references to including the mimetype or pointing to fallback SVG renderers in my research and not seeing a good state of the art reference).

Assume I am checking for SVG support with Modernizr and falling back (probably doing a replacement with a plain <img> tag)for non SVG-capable browsers.

artlungartlung

11 Answers

I can recommend the SVG Primer (published by the W3C), which covers this topic: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

If you use <object> then you get raster fallback for free*:

*) Well, not quite for free, because some browsers download both resources, see Larry's suggestion below for how to get around that.

2014 update:

• If you want a non-interactive svg, use <img> with script fallbacksto png version (for older IE and android < 3). One clean and simpleway to do that:

  <img src='your.svg' onerror='this.src='your.png'>.

  This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.

• If you want an interactive svg, use either <iframe> or <object>.

• If you need to provide older browsers the ability to use an svg plugin, then use <embed>.

• For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:

  Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.

An additional good read is this blogpost on svg fallbacks.

Erik DahlströmErik Dahlström

From IE9 and above you can use SVG in a ordinary IMG tag.

Volker E.Christian LandgrenChristian Landgren

<object> and <embed> have an interesting property: they make it possible to obtain a reference to SVG document from outer document (taking same-origin policy into account). The reference can then be used to animate the SVG, change its stylesheets, etc.

Download ljk usbn sd 2019. Given

You can then do things like

The best option is to use SVG Images on different devices :)

user2771704

Most current browsers today support the srcset attribute, which allows specifying different images to different users. For example, you can use it for 1x and 2x pixel density, and the browser will select the correct file.

In this case, if you specify an SVG in the srcset and the browser doesn't support it, it'll fallback on the src.

This method has several benefits over other solutions:

1. It's not relying on any weird hacks or scripts
2. It's simple
3. You can still include alt text
4. Browsers that support srcset should know how to handle it so that it only downloads the file it needs.

Volker E.ScribblemacherScribblemacher

If you use <img> tags, then webkit based browsers won't display embedded bitmapped images.

If you use inline SVG's, then Explorer won't resize the SVG according to your CSS.
Explorer will resize the SVG correctly, but you must specify both the height and width.

I have found that the <object> tag is the only one that works across all browsers. I had to change the width and height (inside the SVG) to 100% in order to get it to resize correctly.

You can add onclick, onmouseover, etc. inside the svg, to any shape in the SVG: onmouseover='top.myfunction(evt);'

You can also use web fonts in the SVG by including them in your regular style sheet.

Note: if you are exporting SVG's from Illustrator, the web font names will be wrong. You can correct this in your CSS and avoid messing around in the SVG. For example, Illustrator gives the wrong name to Arial, and you can fix it like this:

All this works on any browser released in the last two years.

Results at ozake.com (in French). The whole site is made of SVG's except for the contact form.

Warning: Web fonts are not precisely resized, and if you have lots of transitions from plain text to bold or italic, there may be a small amount of extra or missing space at the transition points. See my answer at this question for more information.

Export Svg File From After Effect Images

Andrew SwiftAndrew Swift

If you need your SVGs to be fully styleable with CSS they have to be inline in the DOM. This can be achieved through SVG injection, which uses Javascript to replace a HTML element (usually an <img> element) with the contents of an SVG file after the page has loaded.

Here is a minimal example using SVGInject:

After the image is loaded the onload='SVGInject(this) will trigger the injection and the <img> element will be replaced by the contents of the file provided in the src attribute. This works with all browsers that support SVG.

Disclaimer: I am the co-author of SVGInject

WaruyamaWaruyama

I would personally use an <svg> tag because if you do you have full control over it. If you do use it in <img> you don't get to control the innards of the SVG with CSS etc.

another thing is browser support.

Just open your svg file and paste it straight into the template.

then in your css you can simply eg:

Some resource: SVG tips

LazerBananaLazerBanana

My two cents: as of 2019, 93% of browsers in use (and 100% of the last two version of every one of them) can handle SVG in <img> elements:

Source: Can I Use

So we could say that there's no reason to use <object> anymore.

However it's still has its pros:

• When inspecting (e.g. with Chrome Dev Tools) you are presented with the whole SVG markup in case you wanted to tamper a bit with it and see live changes.

• It provides a very robust fallback implementation in case your browser does not support SVGs (wait, but every one of them does!) which also works if the SVG isn't found. This was a key feature of XHTML2 spec, which is like betamax or HD-DVD

But there are also cons:

• there isn't an AMP counterpart to <object> (tho it's perfectly safe to use it with <amp-img>and use it inline too.
• you shouldn't mix serviceworker fetch handler with any kind of embed, so having an <object> tag might keep your PWA from being really offline capable.

amenadielamenadiel

Found one solution with pure CSS and without double image downloading. It is not beautiful as I want, but it works.

The idea is to insert special SVG with fallback style.

More details and testing process you can find in my blog.

This jQuery function captures all errors in svg images and replaces the file extension with an alternate extension

Please open the console to see the error loading image svg

Andres SeparAndres Separ

Not the answer you're looking for? Browse other questions tagged htmlsvgvector-graphics or ask your own question.

Join GitHub today

GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.

Sign up

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comments

I am using bodymovin to create web animations and am rendering them in bodymovin as .json files. Lately I found that .Json files are having big file sizes and are not preferred when we are having a lot of animations in our site as they will substantially increase the web page size. I want to render my animations from after effects as pure svg animations which give me a simple .svg file. Is there anyway to render after effects animations as svgs, or atleast can i convert a .jason/.js file into .svg file? Thank you.

No, unfortunately there is no way to export an animated svg from After Effects, since svg doesn't have a full supported animation native language. Exporting a sequence of stills embedded in a single svg would make the filesize even larger. What's the filesize of the animations you're working with?

Adobe After Effects Export

Im getting 1mb to 2mb json files for a 1366*130 size animations. and if i have to use 5 to 6 of such kind of animations, then the web page size will go upto 10 mb or so. so i would like to avoid it. Also devs are reporting that jsons are not good for website's health. So, im deperately looking for an alternative.

Have you tried usin jsons gzipped? Their size will be reduced considerably. Can you share an .aep? Regarding website's health, I'm not sure what they mean.

Export Svg File From After Effect Video

A couple of things: #47 covers converting bodymovin to SVG filmstrips. If it helps, I've also written a tool to help with this outside of the library. Upload a bodymovin json file to it and it'll render separate SVG files on the screen. Click any of them to get a text file of all the SVGs together. I'm not currently supporting it, but I'm happy to open source it if it helps!

Wow. Your tool sounds very promising. I thought of writing one as well. Any chance you will release the code of yours? May be we can join forces..

Thanks jkosoy! Would love to see your opensource. please do comment here if you do it. Thanks.