Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I wanted to create an icon in css, with an svg in between, just the way I saw in duolingo, I have given the screenshot (because you’ll have to login to see). When I saw the source, I saw that there is an svg file with all the icons as a pack, but individually they were set as icons in circles. I suppose that they have used the viewBox property in svg. I just wanted to know I guessed right, and if it is a sensible way, or should I use PNG files?
I don't know, but I guess they were using the CSS Image Sprites technique in conjunction with SVG images instead of using PNGs. This is great for when you have vector graphics and would like to support high-dpi devices ("Retina" and "4k" screens).
Putting them into the same file just reduces the network load and improves loading time. Using SVG also improves network bandwidth usages for these kind of graphics and yields the best fidelity.
So unless you need to target older browsers, using SVGs is a great idea, IMHO.
Just visited Duolingo. They use different techniques, as far as I recognize it. Indeed they cut out icons from some kind of sprite to display these. However, they also use RaphaëlJS to import SVGs which is nice, because it is very easy to manipulate the SVG afterwards.
You can use them to adapt the size of your graphics depending on the resolution of the viewer. However, be aware that older browsers don't support SVG very well (Raphaël has a great backwards compatibility here, but the browser limits still apply).
SVG are surely consume smaller amounts of storage and bandwidth. So it is up to you, if you want to use these or not. If you need to manipulate the graphics it's the way to go IMHO. However, if you need to support old browsers go with png.
This depends on if you are going to support IE8 or not. It's about 3% global usage. Unfortunately for the sector I work for, its more like 10% so I need to support it.
Inlining SVG, as you've described, is a great way to use SVG sprites. SVG elements are available to be styled by CSS so if you name your SVG elements appropriately, you could do something like:
.food-level-2 #icon-food.level-marker-2,
.food-level-2 #icon-food.level-marker-1 {
fill: orange;
}
.food-level-3 #icon-food.level-marker-3,
.food-level-3 #icon-food.level-marker-2,
.food-level-3 #icon-food.level-marker-1 {
fill: orange;
}
Which is awesome! User levels up, you change the class from .food-level-2 to .food-level-3, put a nice transition in there, and all is happy. But this is totally not supported by IE8, and hard to do a fall back for.
Background images, as with traditional css sprites, are very easy to make a fallback for.
.food-level-2{
background-image: (../img/food-level-2.png);
background-image: (../img/food-level-2.svg);
}
If the browser doesn't understand svg, it falls back to the png. Generating extra PNGs is easy if you're using something like font-squirrel or grunt/gulp. Make it a SASS mixin to write the .pngs first, .svgs second.
All is, less happy, but ok. You spend more time in Illustrator making all the possible variations. This looks like the route Duolingo choose with 1-1 png fallbacks. You still get crispy vector graphics where supported, and generally reduced load times.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Assuming that one is developing a web application which is sufficiently non-intensive that overhead is not a concern. Is it reasonable to implement CSS solely in Javascript/jQuery and completely abandon external css files?
$('<div/>').attr({'id':'special_box'}).addClass('little_box').appendTo('body')
$('<div/>').addClass('little_box').appendTo('body')
$('<div/>').addClass('little_box').appendTo('body')
...
$('.little_box').css({'color':'red'})
$('#special_box').css({'color':'blue'})
Is there anybody advocating this complete conflation? Is there anything that completely prevents it or makes it evidently unreasonable?
EDIT
The unreasonableness, as helpfully explained below, is that the jQuery css function is creating styles that are being applied to the individual element and not creating/augmenting master css rules as I'd assumed.
Although there do appear to be ways to achieve this conflation. I am not qualified to analyse them. Thanks all.
It is not reasonable, not only because it is slow (as you'd expect), any .css calls involving classes, e.g. $('.little_box').css(...), will apply css to only elements of that class that exist at the time, not .little_boxes created in the future.
why do you want to complicate yourself while development, CSS is far easy and better to use than doing css through javascript or jQuery.
Apart from being very time consuming to physically code, you CAN do this. However, it's alot more intensive than CSS and prevents alot of the advantages of CSS.
It's like building an oil rig and oil refinery to fill your car up. You could do it, but why not just go to the petrol station?
I would not advocate this complete conflation - certainly for the reasons that others have already stated, but also for these two reasons:
1) If your application grows and has multiple .js files then it will create an additional headache if you try to implement modular loading of the files using something like require.js
2) Again, if your application ever grew very large or you decided you wanted to, it would make it more work to start using Sass
As I'm sure is becoming apparent, the cons massively outweigh the (dubious) pros of this idea.
It's entirely possible to build a site that way, but it will be more work to do it, and also more work to maintain it. So, there is nothing that completely prevents it, but depending on the amount of styles it may be so much extra work that it would be unreasonable.
There is also a performance factor. CSS stands for cascading style sheets, and with such an approach you would lose both "cascading" and "sheets", left with only the style. In practice that means that you apply each style to each element instead of specifying rules that apply to multiple elements. The jQuery selectors can help you to apply the same style to multiple elements, but it will still loop through them and apply the style to each single element.
As this happens in the browser, you may get a noticable delay when the page loads. Also, the styles would be applied after all the elements are created instead of already be there when the elements come into existance, so the visitor may see the page being displayed completely without styling for a shoft while, then freeze completely while the styles are applied, before it displays correctly.
I'm currently planning a web project that has a few animated sequences that need to run on the site.
I need the site to be as cross browser compatible as possible (duh!) and wanted to get fellow developers thoughts on different options.
Canvas is not an option mainly because of IE. IE9+ only support isn't good enough, even though the 'progression' of browser stats for IE is near on laughable
http://www.w3schools.com/browsers/browsers_stats.asp (13% for IE in March 2013 (AND IT COMES AS DEFAULT WITH ALL WINDOWS MACHINES) going slightly off topic...
I was planning on preloading a series of animated gifs for different stages of animations for example 'run', 'walk', 'fly' and then swap the src of an img tag as and when required. I haven't tested anything like this yet, but i invisage delays even with preloaded images (though javascript http://www.preloadjs.com )
although im not too keen on the quality of animated GIFS. taking this idea a little further, using the same method but with each from as a seperate PNG? is that feasible?
Or could a DOM element with a spritesheet attached as the background image work, changing the background position on each step?
Any thoughts or examples ;) would be very helpful! :)
Cheers,
Rory!
---EDIT
im also open to different javascript libraries.. although currently included in my project are jQuery and Rapheal
jQuery animate is going to be your best bet. Buf you have time to generate a sprite sheet to show different animation stages, then you may have enough time to look into a good jquery plugin like gameQuery, which allows you animate sprite sheet items.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
i'm about to choose between using an animated gif, flash or html5/js for a short animation to display a sequence of different images.
what are your thoughts on animated gifs? Are they dead? Should I use HTML5?
THanks for some interesting thoughts. :)
I'd say an important factor is the size of images you want to cycle. For very small images, perhaps sub-100px, an animated GIF might be ok. For anything larger, such as portfolio or item images, they're pretty much unacceptable. It's not so much about semantics or SEO, but rather image quality; GIFs simply don't look good for complex (e.g. photographic) images.
HTML5 doesn't come in to the equation, the markup will be almost identical between (X)HTML4 and HTML5. The javascript is the key part in cycling images, and there are a whole bunch that do all sorts of fancy things, depending on your needs. One of the most well-known jQuery plugins is the cycle plugin. It's very easy to implement.
To return to the idea of semantics and SEO, a GIF embedded in a page doesn't look like many images, so search engines won't know it, meaning any one performing an image search pertaining to what you're trying to display won't find your images. If you use a JS cycle approach, all of your images will be embedded separately in to the markup, and search engines will pickup on this. It does allow users to download the individual images, whereas with a GIF it would require either deconstruction in a GIF editor or a screenshot, but this will either be an advantage or hindrance, which you can consider accordingly.
To summarise: you almost certainly want to cycle to images with javascript.
I would definitely not use flash for something so simple, especially when it makes that part of your website inaccessible to devices such as the iPhone, iPad, etc. HTML5 is nice, but no browser supports 100% of it, and some of the mobile browsers are very lacking in support. A gif would probably be the easiest hassle free way of doing this.
Animated gifs are not good or bad. They are a tool that is widely supported. If they fix your problem you should not hesitate to use them.
Animated gifs would work everywhere.
Flash would be extremely heavyweight and creates a dependency to a flash.
HTML5 is nice, but is not supported by everyone yet.
Depends how complex it is... if it's only a short series of images simply use JavaScript without HTML5. You'd only have to write a few lines of code to produce the effect.
Animated gifs aren't dead. In fact, they're probably more popular now than they have ever been because of so many animated gif memes. That being said, animated gifs can be useful, but consider the advantages of a more dynamic format, that animated gifs can't recreate:
Transitions between images
Can be generated dynamically
File size might be lower
If you don't need those features, or anything else that Javascript provides, then use an animated gif.
As previous answers mention, if an animated GIF is all you need, then go for it.
Flash would be a slight case of overbombing.
If you want something slightly more flexible, you can still use js without bringing HTML5 into the mix, of course.
By making a simple jQuery slideshow out of it, you could buy yourself transition effects and an easy way to replace images. But again, if you don't need that, or that is overkill, then go with the GIF.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Does html5 help developers animate vector graphics in any way? I'm talking about straight key-frame vector animation, such as what flash does.
Is the way to do this basically using javascript to manipulate SVG graphics (such as what http://www.raphaeljs.com does? which is a bit weird to me since it's been supported in browsers for quite some time) or does html5/canvas lend itself someway to vector graphics animation?
I'm just trying to understand what's the "new" way developers will animate vectors on the web if/when flash plug-in eventually dies.
Thanks
There's also CSS animation, which is declarative and can be more efficient because the JavaScript code is not pushing the animation.
But there's nothing inherently wrong with the SVG approach and it's more compatible as well.
Currently there is no alternative for complex animations like the animations you can create with Flash (eg. shape-tweens or animations with 3d or bones), and I personally I think Flash is the way to go if you want crossbrowser killer animation. The Flash IDE offers lots of animation features which are not implemented in any other current web based tool. HTML/css is very limited, since it does not fully support skew/rotation/perspective in all browsers and in HTML you cannot animate background images too. However you can create programmatic tweens (like motion-tweens) with Javascript. At this state of HTML you must be a bit hardcore programmer to get a serious DHTML animation and I think you have to deal with CSS sprites or other blitting techniques to get some performance. Beside animation, Flash offers filtering and blendmodes too, which you would like to use in great animations too.
You can use the animate() function from jQuery for very simple animations (move, fade, slide); you can change properties over time. For a lot of web applications; this could enough. But if you want to animate vectors or want frame based animations; Flash is currently the best choice.
PS. What is wrong with animated GIF's?
This might be interesting in the future. It is a flash to Html5 conversion tool form Adobe. Maybe there is a future on the web where the two technologies converge to a single purpose in stead of being two concurrent technologies side by side.
We may well agree that flash has some drawbacks, closed, slow technology. But I can not believe there is no knowledge in the flash source code, its developers and the large amount of users that could be helpful in the development of Html5. Flash is an easy to use environment for creating animations. Such an environment just does not exist for Html 5. So I believe there is room for flash and Html 5 together.
Edit
You should check out Adobe Edge Preview. a new tool from Adobe for creating rich HTML5 animations.
I have an idea for a website which involves a canvas area which has no limit to its size. Basically you would be able to add items to the canvas (notes, photos whatever really). You would then be able to drag the canvas which would move those items along with the canvas until they disappear of screen. If you dragged the canvas back the other way they would appear again.
Question:
Which would be the best suited to this type of thing, Flash or Javacsript?
My main worries are the speed at which javascript/ flash could handle moving multiple items around on screen in the way discribed. Which language would handle better for a user on a slow machine.
UPDATE:
Thanks for your opnions guys, but to clarify what are the benefits of canvas over straight jQuery DOM manipulation? or visa versa. I've never used canvas before.
I don't think this is a question that will get you an objective answer - Flash developers will tell you Flash is better, web developers will say JavaScript. Trying to remain objective, I'd say that both technologies are suitable for what you describe, but have different advantages.
Flash will definitely render faster, even on slow machines, and is much richer graphically.
JavaScript is more accessible and works on a greater number of devices. Use a good JS framework though.
My initial thought would be to go with Javascript - if it's good enough for Google Maps, it's probably good enough for your app too.
Do you need to use canvas, what you're describing could be done with just javascript and the DOM. It would perform perfectly well unless there are a huge number of elements and it would be cross-browser compatible. For canvas you would require exCanvas to support IE which can sometimes slow things down.
The best way would surely be Javascript. And I would even say that you should reconsider the use of canvas. It sounds like it could be done in pure DHTML. In that way you wouldn't lose support for IE.
Consider using one of the javascript frameworks; Prototype or jQuery come to mind. It will ease your coding immensely. Given the development in javascript-engine performance (next versions of Webkit (Squirrelfish Extreme) and Mozilla (TraceMonkey) will be lightning fast) the worries about performance may be moot.
Also if you decide that you can't do it without canvas consider using John Resig's processing.js.
I'd say go with flash (or DOM if you don't need the extra punch). Here's my reasoning:
You can do cool transformations with canvas (skewing, rotations, gradient fade-ins in images, reflection effects, etc) that you can't with DOM. The downside is that doing these cool things is math heavy.
Canvas doesn't work in IE. IE's equivalent (VML) apparently has a root-access security hole.
The DOM has been around for longer than canvas and since it's more widely used (and depended upon), it's more optimized and polished than canvas.
The Flash community has a lot of good free components available that may already do what exactly you want.
Flash and DOM have a lot of good documentation and tutorials, canvas not so much.
Flash can do pretty much everything that the DOM and canvas can, plus audio, video and grabbing input from your web cam.