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.
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.
I am trying to find the best way to export a complex vector graphic (i.e., an architectural plan, weighing in at several megabytes uncompressed) for optimal display on the web – and I wonder, if the generally recommended SVG 1.1 option in Illustrator is the best choice.
From what I've learned so far, Scalable Vector Graphics Tiny 1.2 specification...
used to have limited viewer support, but not anymore.
has no effect on file size; best way to reduce it is by shaving off unnecessary decimals with SVGO. — I suppose, other than the initial "baseprofile" parameter, an SVG Tiny 1.2 file will not structurally differ that much from an identical vector graphic saved as SVG 1.1.
has some additional features that aren't available in other SVG flavours.
offers a simplified DOM and discards some processor-intensive computations like clipping, masks, symbols, or SVG filter effects.
So, regarding the last point, I wonder: Are today's browsers – especially on smartphones – able to paint an SVG Tiny 1.2 file more efficiently and therefore faster, knowing that they may allocate fewer processing resources or can omit certain rendering steps?
Browsers have mostly skipped SVG 1.2 features and completely ignore baseProfile and version attributes.
The features from SVG 1.2 that have been cherry picked are:
vector-effect non-scaling-stroke
viewBox="none"
Firefox supports both of the above though I'm not sure any other UA supports viewBox="none"
I don't believe so. I doubt very much any of the browsers have different code paths for an SVG that labels itself as baseProfile="tiny" version="1.2".
I'm not even sure that browsers support baseProfile at all. Perhaps #RobertLongson will chime in and confirm here.
SVG 1.2 was not really taken up by browsers. In fact the only SVG 1.2 feature that is supported by most browsers is the vector-effect property.
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.
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.
I'm working on a web-app that uses quite a few large, complex images for backgrounds and for foreground illustrations. I'm leaning toward using SVG instead of raster graphics because of its scalability and the dynamic interactions it allows. But some of the larger images are very complex (several thousand paths, drawn in Inkscape).
How practical will it be (in terms of performance) to use SVG images of that kind of size? Will it make my page significantly slower than if I were using PNG images? Are there specific techniques (e.g., one embedding approach over another) that will make the difference in downloading and rendering speed?
You can simplify the path data to fit your view port size.
Some invisible elements should not be output to DOM tree.
Google map also uses SVG and runs very well.