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
About SVG: is it old technology? I mean maybe after year it will die (will be forgotten)? Is it good to use SVG in new startups for vector graphics? how well SVG is supported by browsers and developers? Can i find reach libraries and good books about it?
Thank you for any advice!!!
All major browsers support SVG quite well, except IE. IE9 will bring SVG support, but not the whole spec (SMIL and filters won't be available for example). Moreover, recent JavaScript performance improvements also benefit SVG.
I don't think it will die soon. Actually, it has not been usable in web projects until now due to the lack of browser support. But as soon as IE9 is available, I predict the rise of the use of SVG. For sure it won't be dropped in the near future.
Some major companies already use it. Google Maps does, and falls back to VML (an old IE specific vector graphics language) if needed.
Canvas is its main competitor, but there is a big difference between both: Canvas is an API and SVG is a document that you can modify through the DOM.
You don't need libraries since SVG is XML. Just write it like you write HTML.
So it might fit your needs, depending on your application.
SVG was first introduced in 2001 with SVG 1.0. It hasn't died yet.
I would suggest starting with the Wikipedia article on SVG: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
Which should answer most of your questions. I can't be more specific about whether its a good fit for your application as I have no idea what your application specifically is.
Lack of SVG support on IE 6-7-8 can be mitigated with plug-ins like Adobe SVG Viewer, Batik (running as an applet) and SVGWeb (a Flash based plugin). The Java web framework ItsNat integrates all of them (and of course native SVG), SVG code can be added to your pages inline into HTML or pure SVG pages (using iframe/object/embed/applet into your HTML).
Take a look to examples here and here (see child nodes). Note: because a bug in Batik applet support SVG events are not working (fixed in v1.1)
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 21 days ago.
The community reviewed whether to reopen this question 21 days ago and left it closed:
Original close reason(s) were not resolved
Improve this question
One of my school project is to make a realtime multiplayers webpage game, I am currently having difficulty to decide if I should go Pixi.js or Phaser for the game graphic and control, could anyone talk a little bit about what they are good at and better that each other?
Phaser uses Pixi for rendering, albeit an older and heavily modified version of it. Current versions of Pixi may give you better performance, but you'll have to implement by hand what's readily available in Phaser.
They are different by that Pixi is a rendering engine and Phaser is a game framework.
I'll quote Rich, the creator of Phaser:
Off the top of my head, here is what Phaser adds onto Pixi:
Choice of physics systems (arcade or full body)
A Game World and a Camera which can pan around it
Tilemap support
A particle system
Sound support (both web audio and legacy audio)
More advanced input handling (input priority, drag and drop, etc)
Keyboard and Gamepad inputs
Scale Manager to handle game / scene resizing + full screen support
Tween Manager for tweening game objects, hooked into the core clock (so it pauses properly when your game does)
Asset loader (supporting all kinds of file types) and Cache
A State Manager to let you swap between game states easily
Game clock + custom timers + timer events
And probably lots more I forgot. As someone has commented though, it depends entirely on what you want to make. Lots of people use Pixi who don't make games at all. However as this is a game dev forum, I'm going to suspect you do :)
I guess just try it. If you don't like it put it down to experience and just use Pixi "raw".
Source: http://www.html5gamedevs.com/topic/12656-phaser-pixi/#comment-72893
Depending on how much you can wait, you may actually wait to try Phaser 3 (Lazer), which is currently in the works, and will have its own rendering engine. I think, however, that learning the current version of Phaser is a good starting point, and many things in Lazer will be the same.
Phaser gives you a full game framework. Pixi is a rendering engine as Kamen described above.
My idea, if you are a beginner on HTML5 game development, you can have two different approaches;
If you have a product ahead of you to complete, Phaser gives you more tools and therefore speed. It is the biggest sea to swim in for HTML5 game development. But it has its own limitations. Off course you can write your own tools but at the end it is a framework and like every framework it forces you to use its own flow and tools to run smoothly. It would require some time for a developer to understand its flaw, pinpoint their needs and if Phaser doesn't meet them, implement their own solutions. But many people use Phaser and most possibly, there is an answer to all of the problems for a beginner. At the beginning they were using Pixi.js as renderer but now they have their own.
If you want to learn by digging deep into HTML5 renderers and game development, starting by using Pixi.js might be a better decision. As mentioned, Pixi.js is only the renderer. It has cool features but it needs more development upon it to make games. But it also gives you the freedom. You mostly won't have to deal with renderers(WebGL or Canvas) but rest is fully up to you. Personally, I started with Pixi.js, I knew about Phaser but I didn't look deeper into it and wrote my own framework. After my framework got into some point on development, I checked Phaser and I realized that what I had in mind was mostly already existed on Phaser. But still it gave me a deeper information about HTML5 game development.
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 7 years ago.
Improve this question
I'm starting with SVG files in my websites and I'm really wondering when to use the SVG code or the SVG image.
When I save a file from Illustrator as SVG I have two options:
I can save the image
I can export to code.
I could use either. But when do I use what? Is is smarter to use the image in my website or do I use the code?
With all the current knowledge I have I should use the code because that is way lighter (kb's). Or should I use the image as a fall-back?
If you want to make use of the capabilities of a vector graphic (scalability, accessable elements, css styling,...) than you should save the code, what essentially is the graphic.
I personally prefer to insert the code directly into the html, so I have all options for script access and css styling.
However that has some downsides: no image cache, removal of non unique ids (if there are multiple svg embeded), style attributes which prevent from styling with css.
I found SVG cleaner very useful to generate clean and useful svg-code after the creation of the image.
If you do not need all that stuff and just want to display the graphic the use of the <img>, or via css background is the way to go, since that enables the browser to cache everything and saves you from all the clean up huzzle.
If your vector graphic contains a lot of effects which have to be rasterized (some illustrator filters for instance), or embedded images, than the final svg might be larger than an pixel image, since the data is embedded as base64 encoded string what adds ~20% to the filesize.
So the use of an png or jpg might be the right choice in that case.
To sum it up: it depends on your needs and characteristics of the graphic.
I hope I could help...
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
It is possible way that PSD file can convert into SVG file or using thirdparty software without sacrificing quality i found this website but for image to vector.
I only need coverter or plugins for Photoshop or in Illustrator export as SVG
I suggest to you use the free vesion of that website vectormagic just save your psd to image then process it to vectormagic website but remember almost 20% of quality is sacrifice because this is vector, to be sure for best result quality make an image with solid color or vetorized images without shadow blue or glow.
If you're knowledgeable in Illustrator here the plug in from Adobe but then Illutrator is different in Photoshop.
I think this is a 2-part question and requires a 2-part answer. Assuming you're going strictly from raster graphic to vector:
You have to get a good raster to vector conversion. Illustrator is good for this if you import your raster into AI and play around with tracing. You'll get decent results, but nothing beats doing the conversion by hand or starting from a vector to begin with. -- If you're starting with vectors already, you can just copy your shapes and paths to Adobe Illustrator (AI).
Once you have your vector is in AI, it's just a matter of using Save As : SVG. If you're using it for web, SVG 1.1 profile is the best option since it's the most compatible with browsers.
2B. If you're doing multiple vectors at once, place each vector into its own artboard inside AI. Once you've done that, you can fit each artboard to the artwork so that the canvas hugs your art. Save As SVG and choose the option "use artboards." -- This will save all the vectors within that AI file as individual SVGs and will use the artboard names a file names.
NOTE: while you can use plug-ins and automated converters to do this, doing it manually will result in the best quality output.
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 6 years ago.
Improve this question
I've been a web developer for quite some time, and I am used to transforming all my designs into the png file format in order to build my webpages. Despite the fact that png, contrary to jpg, allows transparency in the images, is it a better solution?
The question regards page loading time and best webdesign practices, as well as file size versus quality of the images.
What do you think is the best solution to use?
It depends.
PNG is better for crisp images with a low number of colours,
JPG is better for a low-bandwidth image - however it is not as crisp and therefore not very good for GUI.
Generally, JPG is for photos and pictures, whereas PNG (or GIF) is for layout.
You may find this page interesting, as it goes over the basics of PNG vs GIF.
Google has written about it very well. From Selecting the right image format, you can find a flow-chart to make the decision:
Given the ever-rising speed of the average net connection I don't tend to think that page loading time is much of a concern any more [ducks!]; It's really far more useful to think about what you are trying to achieve with the resources you have at your end: For example is bandwidth limited? Then tending towards heavier compression is a no-brainer. Is the graphic content of the site going to expand, ensuring that the cost of server space will increase over time? Then tending towards heavier compression will delay that cost. Is it an art portfolio site? Then -- aha! -- compression artefacts in the sampler work may actually be desirable! Are you trying to flog a game? Then the screenshots should probably be ultra-crisp.
Generally, then, I would repeat what has been said, although perhaps in slightly different language: For site furnishings, which tend to be computer-generated and will be cached for re-use between pages, tend towards png; For site content, which will often be page-specific and likely large and complex enough to mask lossy compression, tend towards jpg.
With specific reference to switching to png where you decide it is appropriate, run everything through PNGCrush as a matter of course -- otherwise they won't get displayed with the colours you expect in every browser and the overall quality of your design will be diminished.
"Given the ever-rising speed of the average net connection I don't tend to think that page loading time is much of a concern any more "
According to the website SEO optimisation, Google rank your website worse if page load time is above 2 seconds, so compression is necessary, especially on new website designs heavy on graphics.
jpg is usually preferred for photographic images that have a lot of subtly different colors. png works well with computer generated graphics.
That's my rule of thumb.
I am a starter and mostly what I do is if the image is too big I make small unless it's a background image. And if it is for layout I choose PNG and JPG for pictures.
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 heard from more than a single source that SVG is dying, it is abandoned by Adobe.
How sad! What's will be next alternative to SVG?
SVG is an open standard, developed by W3C. I really don't see it dying any time soon. Just because certain companies decide to drop its use for their commercial products (usually because they need, or feel they need, something more customised), it does not at all mean SVG will disappear on a more global scale.
At the moment, it's undoubtedly the most widely used vector graphics format on the web. Just take for example the images on Wikipedia - for almost all diagrams SVG is either used or there is a notice stating that it should be used. Many other open source projects endorse it in a similar way.
Now, the XAML markup language (part of WPF/Silverligtht) has been seen as a competitor to SVG by some, but truly they only overlap in functionality to a certain degree. (XAML supports lots of other things such as data binding, events, triggers, etc.) Indeed, the general use of XML is much restricted in that browsers don't natively support it (and can't properly, because of the fact that it's tightly bound to MS technologies). I would not even believe that it's strictly a direct competitor to SVG, nor that Microsoft have intended so.
To conclude, I don't think one can envisage SVG dying out until something clearly improved (and open-standard) comes along to replace it. As far as I know, there is nothing like that at the moment.
Check your sources.
A lot of people want SVG "dead". A common way of getting something to happend is by spreading rumours that it has already happend. It's called a self-fullfilling prophecy (wikipedia). Don't buy into it, and please don't actually help those wanting it dead by spreading the rumor further yourself.
Is SVG dead?
No, it has just begun.
What's next?
HTML5, Canvas and SVG in one long glorious love-affair. Get your first-row tickets now!
(Actually here's a youtube video of html5, canvas and svg showing off the infinite resolution inherent in vector graphics. Somewhat lame but real, unlike rumors.)
SVG (Viewer) was abandoned by Adobe ages ago since most browsers support it natively.
Only IE is holding back the technology by not having native support.
Update: IE9 will have both native SVG support and native Canvas support! (Vista and above only though)
If you'd like to show your support for getting IE to support it natively add your vote and comments to these bugs.
https://connect.microsoft.com/IE/feedback/SearchResults.aspx?SearchQuery=SVG
Bring back VML! Just kidding ;) I don't think SVG is dying, but <canvas>'s adoption for HTML5 seems like the way things are going on the web.
I'd like to add my support for SVG. First, I believe that it is widely used in mobile technology though this is through conversations about 2 years ago rather than seeing code. It was one for the first languages developed by W3C to be used over-the-web and has been consistently supported for the last 10 years. I initially thought it would be a killer-app in 1998 and said so, especially since Adobe then had enthusiastic support.
Because SVG is a full XML dialect it can be easily mixed with other XML applications such as XHTML and MathML. It's possible to include XML information in SVG elements so that documents can be fully semantic (i.e. carry a data-meaning as well as a graphical one).
SVG is effectively feature-complete for a 2-D graphics language. There is no technical reason to invent anything else. It does high-quality rendering, animation and can support interaction through its own elements or through Javascript. It is therefore unlikely that major web software manufacturers will NEED to invent anything else.
The main problem is not that SVG is "dying" - it is not - but that it takes a long time for the various companies to converge. When they do I would expect SVG to emerge as a consensus.
Part of the problem is that graphics are not yet seen as a semantic problem - it's often "easier" to inflict a dumb animation on a client than to set up the infrastructure to send semantics over the web and repurpose at the client. But as the semantic web develops then standards such as SVG will be increasingly important. If, for example, you wish to mash-up geographical information then either you use a properietary solution such as GoogleMaps, or you look for a shared standard approach. You can never count on free proprietary solutions in the long run.
Note also that in many areas which receive public funding there is an increasing drive towards Open standards and this is another reason why SVG is well positioned.
Then there's this article posted Friday on Network World, titled EC decision expected to force IE to better support standards. In it, Håkon Wium Lie, Opera's CTO, states
Second, due to the increased competition stemming from the ballot box, browsers will improve their support for standards. This will result in a richer, faster web. For example, I believe that Microsoft's IE will add support for SVG, a standard that all browsers but IE support.
Of course, it's in his best interest to see IE falling in line, but behind, his browser. He gets to be cutting edge, but part of a larger 'standards' crowd.
While this is an question was asked before high res/ retina displays came to be the normal for mobile devices. SVG is having a big come back as vector graphics solves DPI issues on the web. You will be seeing more SVG on the web than before.
Even apple.com menu is svg now days!