Related
I have to draw charts on browser using a python backend (which may not matter here). There are numerous libraries like JQPlot, D3, Google Charts for achieving this.
But if you classify them, they are either HTML5 Canvas based or SVG based. Both are important technologies in their own space. But
for charting as a subject, shall I go with SVG based libraries or
HTML5 Canvas based libraries. What are downside and benefits of
both approaches.
I don't have any prior experience with charting and don't want to hit the wall
after I start the project.
Projects with a large amount of data may favor canvas. SVG approaches typically create a DOM node per point (unless you make paths), which can lead to:
An explosion in the size of your DOM tree
Performance problems
Using a path, you can get around this problem, but then you lose interactivity.
Say you're building a stock chart. If you are talking about a chart with, say... max 5 years and end of trade data samples only, I think the answer is clearly SVG. If you're talking about looking at Walmart's historical data from day one of trading or doing full trade information per minute, you are going to have to really look carefully at SVG. Probably will have to employ fancy memory management and a fetch-on-demand approach as SVG will fall apart, particularly if you go one sample to one SVG node.
If interactivity is a requirement, SVG easily has the edge, given:
It is a retained mode API
You can use typical event handlers
You can add/remove nodes easily, etc.
Of course, you see that if you require full interactivity, it may go against mechanisms that allow SVG to scale, like path collapsing, so there is an inherent tension here.
There is going to be a trade-off in extremes. If size is small, the answer is SVG hands-down. If size is large and no interactivity, the answer is SVG with path drawing only or using Canvas. If size is large and interactivity is required, you have to go canvas or tricky SVG, which is complex in either case.
Some libraries out there offer both canvas and SVG renders, such as ZingChart and Dojo. Others tend to stick with just one of the two options.
Being vector based, SVG gets you scalability for free, and a side effect of this is that it's sharp on high resolution displays and sharp when printed. You can kind of get around this with canvas by rendering at 2x resolution and scaling your canvas but it's kind of a half-solution.
SVG I think is the modern way and the way to do this moving forward.
If you are concerned about rendering speed if you have many nodes consider also that if you're using canvas, you're basically using your own Javascript based rendering code which has to render those same nodes. You do get the predictability of only having to render it once, but if you only render it once that also means you lose the ability to re-render when zooming or to do various interactive things. If performance is a problem you can simplify SVG by sub-sampling your data, taking moving averages and plotting that only once per x rows, etc depending on what you're doing. But, we're talking thousands and thousands of nodes with almost no impact.
Canvas still has a place if you are building a web based raster graphics editor or something that in inherently raster-based but essentially if we are looking at charts, we're talking about something that's inherently vector based.
I am trying to draw this svg of europe using raphael. For each path in the svg, I've parsed it and do: r.path([countrypath]). This works, but the problem is that it is gigantic. For example, some of the paths look like M 11689.234, 6005.2561... It isn't even coming close to fitting on a 500x500 canvas. How do I resize this? Raphael's scale/translate don't seem to work, or I don't know how to use it. I noticed in the SVG each path has transform="translate(5.875e-4,7.538462e-5)" Do I need to somehow change the viewBox? Or change the svg path's somehow before it touches Raphael?
you can use scale(Xtimes,Ytimes,centreX,centreY)
where Xtimes,Ytimes are the proportion reduction if you select 0.2 the images would be reduced to 1/5th
and
centreX, centreY are relative coordinates where you should select 0,0 so that all paths/parts of svg are scaled down uniformly and relatively
if you select scale(0.2,0.2,0,0) your image would be properly reduced to 1/5th
I actual picked out quite a large SVG of the world yesterday and fed it through the SVGTOHTML converter.
You will find the tool and associated info #
http://www.irunmywebsite.com/raphael/svgsource.php
I set up a whole load of resources for Raphael #
http://www.irunmywebsite.com/raphael/raphaelsource.php
Amongst these you will find the world map wrapped in the scale pluton provided by Zeven!
The 20minute exercise delivered this...
http://www.irunmywebsite.com/raphael/colourmap2.php
Hopefully this will help you or someone with a similar problem in the future.
Also note that you can simplify paths in SVG editors as well as scale them before you put them in the SVGTOHTML converter.
Quite often maps can be drawn to extreme detail but simplifying them will greatly reduce path length.
You have two options either use what I did, use the .transform("transform string") to scale the paths, the transform string can be sww,hh,xx,yy where ww and hh is by how much you want to scale the path.
.transform("s0.25,0.25,0,0");
You can find an EXAMPLE HERE or jsfiddle HERE.
Or use
paper.scaleAll(n);
where n is the amount by you want to scale the whole paper by. First create the path in the page and then scale the paper object by maybe half
paper.scaleAll(0.5);
You can find the library and examples for the Scale.Raphaeljs library in the link below:
Scale Raphael library
Translating by such a small amount seems a bit wasteful, it's ~0 anyway, I doubt you'd see much of a difference if you stripped off the transform attributes that look like that.
Yes, changing the viewBox could make it fit to whatever you wanted in all viewers that support SVG, but raphael itself doesn't support viewBox (you'd have to provide some VML fallback yourself).
Either preprocess the path data to fit your particular use (probably a good idea anyway, it always helps to keep the filesize down, wikipedia maps are usually quite large) or use raphael's scale function to scale the paths to a proper size.
Update: Raphaël v2.0 and later does support viewBox (via the setViewBox method).
You can use the Raphael attribute 'translation', which takes an x,y delta. ie:
r.path([countryPath]).attr({translation:'-11689, -6005'});
To make it more reusable for multiple paths, you could parse the x and y values from the M in your svg path. When I did this, it turned out that I didn't want my path to be exactly on the 0,0 since that sent it over the canvas as well -- might take some adjustment depending on the height and width of your element.
I'm working on a game using OpenGL displaying sprites, i.e. 2d quad-mapped graphics with no projection, that will be displayed on several different resolution screens. (i.e. iPhone retina/non-retina, iPad.. my next project the problem will expand to desktop resolutions which are far more numerous)
I'm OK with handling different aspect ratios, that can be handled by opengl and my placement of the sprites. I'm also OK with slightly different resolutions - use same art and either border the screen, or display a little bit more info.. but when things start to grow/shrink by like 50%+ it's a major issue.
What is standard procedure for generating the art assets in this situation? Generate for the largest resolution and just let OpenGL worry about resizing during it's rasterizing, or do people generate art sets for each main resolution?
Rasterized sprite art tends to get ugly when it's stretched (interpolated), so I'm concerned.. but generating different sizes really means for practical purposes I have to go with vector drawings and export several resolutions. Limits the artist and is somewhat complicated as far as loading and managing the assets
(Yes, I can "just try it" to an extent, but I already have an idea of the results. I'm looking for solutions people use and angles I maybe wouldn't have thought of. This question does have an answer(s) it's not subjective or lazy)
You are correct that scaling bitmaps tends to make sprites bad. There are a couple of ways of dealing with that:
Draw them (pixelart) at all required resolutions. That is a lot of work but gives you full control.
Draw them (vectors) and render them at all required resolutions. Less work but scaling up or down beyond 50% or 200% might give bad results.
Draw them (3D appliction) and render them at all required resolutions. Quite some work but a very consistent set of sprites.
For each of these options you are free to post-process the bitmaps to clean them up or add details but if you do this for options 2 and 3, you are breaking the chain and will have to apply the changes again when rendering the same set again.
An other option is to limit the variation of resolutions.
As far as I know it is very common in the (game) industry to make all (or the most used/visible) sprites as pixel perfect as possible. This is what they pay the artists for...
Let me describe the "battlefield" of my task:
Multi-room audio/video chat with more than 1M users;
Custom Direct3D renderer;
What I need to implement is a TextOverVideo feature. The Text itself goes via network and is to be rendered on the recipient side with Direct3D renderer. AFAIK, it is commonly used in game development to create your own texture with letters/numbers and draw this items. Because our application must support many languages, we ought to use a standard. That's why I've been working with ID3DXFont interface but I've found out some unsatisfied limitations.
What I've faced is a lack of scalability. E.g. if user is resizing video window I have to RE-create D3DXFont with new D3DXFONT_DESC while he's doing that. I think it is unacceptable.
That is why the ONLY solution I see (due to my skills) is somehow render the text to a texture and therefore draw sprite with scaling, translation etc.
So, I'm not sure if I go into the correct direction. Please help with advice, experience, literature, sources...
Your question is a bit unclear. As I understand it, you want easily scalable font.
I think it is unacceptable
As far as I know, this is standard behavior for fonts - even for system fonts. They aren't supposed to be easily scalable.
Possible solutions:
Use ID3DXRenderTarget for rendering text onto texture. Font will be filtered when you scale it up too much. Some people will think that it looks ugly.
Write custom library that supports vector fonts. I.e. - it should be able to extract font outline from font, and build text from it. It will be MUCH slower than ID3DXFont (which is already slower than traditional "texture" fonts). Text will be easily scalable. Using this way, you are very likely to get visible artifacts ("noise") for small text. I wouldn't use that approach unless you want huge letters (40+ pixels). Freetype library may have functions for processing font outlines.
Or you could try using D3DXCreateText. This will create 3D text for ONE string. Won't be fast at all.
I'd forget about it. As long as user is happy about overall performance, improving font rendering routines (so their behavior looks nice to you) is not worth the effort.
--EDIT--
About ID3DXRenderTarget.
EVen if you use ID3DXRenderTarget, you'll need ID3DXFont. I.e. you use ID3DXFont to render text onto texture, and then use texture to blit text onto screen.
Because you said that performance is critical, you can delay creation of new ID3DXFont until user stops resizing video. I.e. When user starts resizing video, you use old font, but upscale it using texture. There will be filtering, of course. Once user stops resizing, you create new font when you have time. you probably can do that in separate thread, but I'm not sure about it. OR you could simply always render text in the same resolution as video. This way you won't have to worry about resizing it (it still will be filtered - along with the video). Some video players work this way.
Few more things about ID3DXFont. There is one problem with ID3DXFont - it is slow in situations where you need a lot of text (but you still need it, because it supports unicode, and writing texturefont with unicode support is pain). Last time I worked with it I optimized things by caching commonly used strings in the textures. I.e. any string that was drawn more than 3 frames in the row were rendered onto D3DFMT_A8R8G8B8 texture/render target, and then I've been copying that string from texture instead of using ID3DXFont. Strings that weren't rendered for a while, were removed from texture. That gave some serious boost. This solution, however is tricky - monitoring empty space in the texture, removing unused strings, and defragmenting the texture isn't exactly trivial (there is nothing exceptionally complicated, but it is easy to make a mistake). You won't need such complicated system unless your screen is literally covered by text.
ID3DXFont fonts are flat, always parallel to the screen. D3DXCreateText are meshes that can be scaled and rotated.
Texture fonts are fuzzy and don't look very clear. Not good for an app that uses lots of small text.
I am writing an app that can create 500 text meshes, each mesh averaging 3,000-5,000 vertices. The text meshes are created once, then are static. I get 700 fps on a GeForce 8800.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
When doing small icons, header graphics and the like for websites, is it better to use GIFs or PNGs?
Obviously if transparency effects are required, then PNGs are definitely the way to go, and for larger, more photographic images I'd use JPEGs - but for normal web "furniture", which would you recommend and why? It may just be the tools I'm using, but GIF files usually seem to be a bit smaller than a comparible PNG, but using them just seems so 1987.
As a general rule, PNG is never worse, and often better than GIF because of superior compression. There might be some edge cases where GIF is slightly better (because the PNG format may have a slightly larger overhead from metadata) but it's really not worth the worry.
It may just be the tools I'm using, but GIF files usually seem to be a bit smaller than a comparible PNG
That may indeed be due to the encoding tool you use.
/EDIT: Wow, there seem to be a lot of misconceptions about PNG file size. To quote Matt:
There's nothing wrong with GIFs for images with few colours, and as you have noticed they tend to be smaller.
This is a typical encoding mistake and not inherent in the format. You can control the colour depth and make the PNG file as small. Please refer to the relevant section in the Wikipedia article.
Also, lacking support in MSIE6 is blown out of proportion by Chrono:
If you need transparency and can get by with GIFs, then I'd recommend them because IE6 supports them. IE6 doesn't do well with transparent PNGs.
That's wrong. MSIE6 does support PNG transparency. It doesn't support the alpha channel (without a few hacks), though but this is a different matter since GIFs don't have it at all.
The only technical reason to use GIFs instead of PNGs is when use need animation and don't want to rely on other formats.
The W3C mention 3 advantages of PNG over GIF.
• Alpha channels (variable
transparency),
• Cross-platform gamma correction
(control of image brightness) and
color correction
• Two-dimensional interlacing (a
method of progressive display).
Also, have a look at these resources for guidance:
PNG v's GIF (W3C Guidance)
PNG FAQ
Wow, I'm really suprised with all the wrong answers here. PNG-8 will always be smaller than GIF when properly optimized. Just run your PNG-8 files through PngCrush or any of the other PNG optimization routines.
The key things to understand:
PNG8 and GIF are lossless <= 256 colors
PNG8 can always be smaller than GIF
GIF should never be used unless you need animation
and of course,
Use JPG for black&white or full color photographic images
Use PNG for low color, line art, screenshot type images
The main reason to use PNG over GIF from a legal standpoint is covered here:
http://www.cloanto.com/users/mcb/19950127giflzw.html
The patents have apparently expired as of 2004, but the idea that you can use PNG as open-source over GIF is appealing to many people.
(png open source reference: http://www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS)
Be careful of color shifts when using PNG. This link gives an example, and contains many more links with further explanation:
http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx
GIF images are not subject to this problem.
I don't think it makes a lot of difference (customers don't care). Personally I would choose PNGs because they are a W3C standard.
Be cautious with the PNG transparency effects: they don't work with IE6.
For images on the web, each format has its pros and cons. For photograph-type images (ie lots and lots of colours, no hard edges) use a JPEG.
For icons and the like, you have a choice between PNG and GIF. GIFs are limited to 256 colours. PNGs can be formatted like GIFs (ie 256 colours, with 1-bit transparency that will work in IE6), but for small images they're slightly larger than GIFs. 24-bit PNGs support both a large gamut, and alpha transparency (although it's troublesome in IE6).
PNGS are your only really sensible choice for things like screenshots (ie, both lots of colours and hard edges), and personally, that's what I stick with most of the time, unless I have something for which JPEG is more suitable (like a photo).
Indexed PNG (less than 256 colors) is actually always smaller than gif, so I use that most of the time.
For computer generated graphics (i.e. drawn by yourself in Photoshop, Gimp, etc.) JPG is out of the question, because it is lossy - i.e. you get random gray pixels. For static images, PNG is better in every way: more colors, scalable transparency (say, 10% transparent, .gif only supports 0% and 100%), but there is a problem that some versions of Internet Explorer don't do PNG transparency correctly, so you get flat non-transparent background that looks ugly. If you don't care about those IE users, go for PNG.
BTW, if you want animations, go for GIF.
PNG is a 100% replacement for GIF files and is supported by all web browsers you are likely to encounter.
There are very, very few situations where GIF would be preferable. The most important one is animation--the GIF89a standard supports animation, and virtually every browser supports it, but the plain old PNG format does not--you would need to use MNG for that, which has limited browser support.
Virtually all browsers support single-bit transparency in PNG files (the type of transparency offered by the GIF format). There is a lack of support in IE6 for PNG's full 8-bit transparency, but that can be rectified for most situations by a little CSS magic.
If your PNG files are coming out larger than equivalent GIF files, it is almost certainly because your source image has more than 256 colors. GIF files are indexed to a maximum palette of 256 colors, while PNG files in most graphics programs are saved by default in a 24-bit lossless format. If file size is more important than accurate colors, save the file as an 8-bit indexed PNG and it should be equivalent to GIF or better.
It is possible to "hack" a GIF file to have more than 256 colors using a combination of animation frames with do-not-replace flags and multiple palettes, but this approach has been virtually forgotten about since the advent of PNG.
A major problem with GIFs are that it is a patent-encumbered format (EDIT: This is apparently no longer true). If you don't care about that, feel free to use GIFs. PNGs have a lot more flexibility over GIFs, particularly in the area of colorspace, but that flexibility often means you'll want to "optimize" the PNGs before publishing them. A web search should uncover tools for your platform for this.
Of course, if you want animation, GIF is the only way to go, since MNG was basically a non-starter for some reason.
"It may just be the tools I'm using, but GIF files usually seem to be a bit smaller than a comparible PNG, but using them just seems so 1987."
It probably is your tools. From the PNG FAQ:
"There are two main reasons behind this phenomenon: comparing apples and oranges (that is, not comparing the same image types), and using bad tools." continued...
But you could always try saving as both (using the same colour depth) and see which comes out smaller.
Of course, if you want to standardise on one graphic format for your site, PNG is likely to be the best one to use.
Personally I use gif's quite a bit for my images, as they work everywhere, obviously your transparency limitation is one key element that would direct someone towards a specific format.
I don't see any downfalls to using gif's.
If they get smaller and you have nothing to gain from using the features PNG offers (which is alpha channel transparency and more than 256 colors) then I see no reason why you should use PNG.
gif files will tend to be a little smaller since they don't support a transparency alpha channel (and maybe for some other reasons). Personally, I don't feel the size difference is really worth worrying about nearly as much as it used to. Most people are using the web with some sort of broadband now, so I doubt they will notice a difference.
It's probably more important to use the type of images that your manipulation tools work best with.
Plus, I like the ability to put an image on any background and have a drop shadow work, which points me more towards the png format.
I usually use gif's because of the size, but there is also png-8 which is 256 colours as well.
If you need fancy semi-transparent stuff then use png-24.
I usually use the 'save for web' feature in photoshop, which lets you fiddle with filetype, number of colours etc and see the result before you save. Of course I would use the smallest possible which still looks good in my eyes.
I use jpg for all non-transparent images. You can control the compression, which I like. I found this web site that compares the two. jpg is smaller and looks better.