Assuming that the SVG is the standard for still vector images, there is an equivalent for animated vector-based images too ?
The problem I'm trying to solve can't be solved by pixel-based formats such as APNG or GIF, they don't scale at all on different displays, and they also get really really heavy pretty quick, vector images are what I need but I need a standard way to provide a file with an animated vector entities in it.
To be clear I'm not trying to animate a webpage or part of it, I'm asking for a filetype or standard that is good for just this task.
You can animate SVG graphics... they don't have to be static. That said, SVG is the only vector graphics format the web supports (natively) so I guess the answer is SVG! ;-)
The SVG specification includes SMIL as an animation mechanism. IE9/10/11 do not support SMIL, although other UAs do. There's a javascript library called fakesmile that can enable SMIL on UAs for which support is lacking.
There's also CSS animations which IE does support, although overall support for CSS animations is somewhat less complete in most UAs.
Related
my question may seems not new, but as far as I searched for days I couldn't find my answer.
I'm trying to make a webpage with PIXI.js which uses webGL.
My webpage is mouse movement parallax, I mean all the movements an object can have is few pixels when the user moves his/her mouse pointer.
Now my problem: I have some simple images and i don't know to use svg or png.
My images are like these:
https://1drv.ms/i/s!Aj-BeFYyTnRzhTBSVEXXeJ2c-O7V
https://1drv.ms/i/s!Aj-BeFYyTnRzhTFeTzJLrWaq_VFh
https://1drv.ms/i/s!Aj-BeFYyTnRzhTIa9lAaS9dKX1DL
I want to make my webpage as smooth as possible and I don't know to use png or svg. I searched a lot, some says it depends on the png and svg, in my case my svgs won't be too complex but some says because svg use CPU and the WebGL use GPU using them both, cause lack of performance, and also some says which using svg in PIXI makes no difference than the png because PIXI makes texure from them and there won't be any deference...
I'm new to webGL and Pixi so now with these answers I became confused, by the way, for my case the images size is not mattered, I only wanted as much smoothness as possible.
thanks a lot for your help.
It doesn't make a difference for runtime performance, the SVGs will be rasterized into textures either way. However during initialization where the browser neeeds to rasterize the SVGs to create a texture from them there might be a significant performance penalty depending on how complex your SVGs are.
However since you're developing for the web aforementioned penalty is easily offset by the fact that you're loading the SVGs from a server which introduces way more latency than rasterizing the SVG will, even more so if you consider the size difference between a rasterized PNG and a SVG(assuming you're not planning to create tiny textures from them).
So final verdict, go with SVG, its lossless and small aswell as resizable and editable from within client code. It also saves you from exporting your source assets to PNG everytime you change something.
Good use for SVG in websites would be to cheaply scale graphics and backgrounds to full screensize. Then why is my CPU going berserk when scaling up my simple SVG-animation to full screen. SVG is vectors and sould take same time to calculate regardless scale ?
Yes, SVG is powerful and rich in animation and quality when you resize in any size, from smaller to bigger. It never loses the quality. It is superior to the ICNS, JPG and PNG formats. But not all browsers are compatible with the SVG paths. I recommend you to use Inkscape, the which uses the SVG as SVG standard, do all the separated paths.
As for the CPU, it depends on your and their computers and browsers specifications. An inexpert user of Windows 7 and internet Explorer 9 couldn't see your SVG. Always consult http://caniuse.com (it has SVG list) in the which each browser is compatible with each SVG feature.
To answer your question: Yes, SVG is really scalable.
As for your CPU freaking out, that depends on several variables, including your computer specs, what browser you're using, and how complex the SVG is. Of course, it could also be something like a driver issue, etc.
We are currently using PNGs in production for icons, but as a designer I'm trying to push for using SVG's for the benefit of:
a. Rendering on Retina.
b. Visually impaired users that zoom in.
c. An easier workflow when creating icons.
Are there any researches that compares the 3 methods? (PNG Sprite vs SVG sprite vs Icon fonts) in terms of performance?
If not, what and how would you compare them? (For example, I heard SVG requires more CPU power, and I have no idea how to test it or what are the consequences).
Thanks a lot! You are an amazing community.
BTW, this is what I could find:
svgs are cool, but icon fonts are just 10% of their file size
SVG + Icon Fonts:
Iconserving - SVG or Webfont?
Ten reasons we switched from an icon font to SVG
Not an answer but it will be not readable in comments
PNG's are raster images
So for render they just need to be decompressed which need CPU power but nowdays is this not so bad.
SVG's are vector XML files
Which means that you need to:
read XML text
decode it to some vector graphic capable engine/class
render vector graphics based image
Complicated SVG's (>300MB vector utf-8) have load/decode/render times even in minutes on fast machines (if decoded everything). If you decode just the basics you can do the same in seconds, but lost advanced features.
Many will not agree with this: 'problem is there is not a single 100% compatible easy to implement SVG library ... at least that I know of' but take in mind I do not use frameworks or environments for WEB like JAVA or PHP ... Also each SVG lib has it own quirks. If you compare rendered SVG between different web or image viewers then it is not the same and many features aren't supported everywhere.
You can code your own SVG decoder but it is bit complicated. If you want just basic functionality like path and shapes without animations or gradients then it is relatively easy to do, but if you want to implement everything you would spend a lot of time with that.
For a time I had a big problem finding good free SVG editor. The only one 'usable' I found was Inkspace but it is slow and a bit user unfriendly for my taste. On the other hand it can open almost every type of SVG I use in the right way...
[Notes]
If you want to use SVG's for icons I strongly recommend to render them to raster on App start and then use just raster images like bitmaps from memory to avoid performance problems.
So I'm just getting into SVG and learning how it works. At the moment I am creating a project that involves rotating several SVG <circle>s at different speeds, thus learning how animateTransform works.
However, I found out that one can use CSS3 animations (which I am much more familiar with) on SVG objects. I realize that animateTransform can do more complex animations, but I'm talking in terms of a simple animation that both options have the capability of completing.
What are the drawbacks (if any) of CSS3 animations used on SVG objects when compared to animateTransform? Does animateTransform perform better?
No IE support for <animate… you have to use a polyfill library like fakeSMIL - which is not the end of the world. Also css3 transforms are GPU accelerated on iOS mobile and chrome for mobile (for the most part) so they tend to be smoother.
Is there a JavaScript implementation of the OpenVG standard based on WebGL?
I'm pretty aware that we can render vector graphics in the browser, I'm just curious as to whether or not anyone has actually managed to render SVG with WebGL, with or without basing this on the OpenVG standard. If it doesn't exist, would it be useful to start a project?
Here's some C code for parsing and rendering SVG in OpenGL 1.x: https://github.com/tnovelli/vsprite. It might not be quite what you're looking for. We used a Stencil Buffer trick to draw 2D polygons. For 3D, I guess you'd have to render into an off-screen buffer and texture-map it onto a 3D object. (Why not pre-render SVG into raster images? Because our objects are breakable and deformable.)
I'm thinking about porting this to Javascript+WebGL. The browser's XML/SVG/CSS parsing features should eliminate a lot of the work, but the stencil trick could pose a challenge. This is a back burner project for me, so if anyone else wants to try something, don't hold your breath, just do it! :)
Well none of these answers answer the question explicitly. #tom shows that yes, we can render vector graphics on the webgl canvas using a neat stencil trick. This isn't however a full implementation of the OpenVG specification and I am curious as to how much of the OpenVG spec could be implemented this way. So to conclude:
There are no implementations currently, but there doesn't appear to be a particular demand for it.
As WebGL mixes just fine with any other HTML(5) technique, you can mix it up already. The only thing is that you won't be able to mix SVG with WebGL using its depth buffer - for example a logotype (SVG) placed in a 3D-world (WebGL). But maybe that's just what you like to do?