Handling SVG on Canvas HTML5 with Fabric.js

Hello Viewers, In this blog, we are discussing about handling or merging of SVG files on Canvas HTML5 with the help of fabric.js library to empower web & digital creativity. It is a big win for our task force, who apply the very changes to Canvas HTML5 for faster & better convenience as per user creative need.

What is Canvas HTML5.?

• A paint program with a pixel-based representation.
• Set the color and line style with a stack-based API.
• Convenient to get SVG Plot to efficiently generate clean SVG code.
• Uses a combination of DOM tree manipulation and Canvas calls.
• Canvas calls results can be saved to an SVG file for later display & conversion to PDF, PNG or printing at high-res.

Canvas-loading from a string:

There are two types JSON & SVG representation
JSON has fabric.Canvas#loadFromJSON & fabric.Canvas#loadFromDatalessJSON methods.SVG has fabric.loadSVGFromURL & fabric.loadSVGFromString.
The first two methods are instance methods and are called on a canvas instance directly.The other two methods are static methods and are called on the “fabric” object rather than on canvas.

What is Scalable Vector Graphics (SVG).?

• A language for describing 2D graphics in XML.
• A drawing program, where image can be generated with various popular tools, i.e. drawing application in Google Drive, Inkscape, Illustrator, Corel Draw and lots of others.
• Used to define vector-based graphics for the Web
• Quality of images are maintained, even if zoomed or resized
• Every element & attribute can be animated.
• Perfect for applications with large rendering areas or Maps.

SVG-loading methods

There are two methods string or URL. Below describes the example of string method:

1. fabric.loadSVGFromString(‘…’, function(objects, options) {
2. var obj = fabric.util.groupSVGElements(objects, options);
3. canvas.add(obj).renderAll();
4.   });

The first is the SVG string, and the second is the callback function. Callback is invoked when SVG is parsed, loaded and receives two arguments i.e. objects and options. Objects, contains an array of objects parsed from SVG i.e. paths, path groups (for complex objects), images, text & so on. To group those objects into a cohesive collection as in an SVG document use fabric.util.groupSVGElements and pass it to both objects and options. In return, you will receive fabric.Path or fabric.PathGroup, which can be added onto canvas. The fabric.loadSVGFromURL method works the same way, except to pass a string containing a URL instead of SVG contents. The SVG needs to conform to the usual SOP rules, as Fabric attempt to fetch that URL via XML Http Request.

How to Handle SVG Image Files with Canvas.?

It is difficult to just draw HTML into a canvas. It essentially requires an SVG image containing the content. To draw HTML content, use a & lt;foreignObject> HTML element, then draw that SVG image into your canvas. It Conveniently load up & draw a SVG image JavaScript ele­ment to the can­vas.

• varsource = newImage();
• source.src = ‘http://example.org/myfile.svg’;
• source.width = ‘100’;
• source.height = ‘100’;

Why to use fabric.js?

Canvas helps to create some absolutely amazing graphics, but it provides API of low-level. If you simply draw few basic shapes on canvas and forget about them, and as soon as there’s need for any kind of modification, situation will be cumbersome. Fabric.js aims to solve this problem, by providing convenient & powerful object model on top of native methods, by taking care of canvas state and rendering & also helps to work with “objects” directly. Here you can;

• Populate & create objects on canvas; i.e. simple geometrical shapes (rectangles, circles, ellipses, polygons, or more complex shapes) consisting of hundreds or thousands of simple paths.
• Scale, move, and rotate objects with the mouse; modify properties i.e. color, transparency, z-index, etc.
• Manipulate objects altogether (grouping with a simple mouse selection).
• Add text & dynamically manipulate its size, alignment, font family and other properties.
• Apply filters to images, making them grayscale & removal of background.
• Serialize the entire canvas into a JSON string, saving locally or on a server to restore it any time.

For more information how to use Fabric.js for HTML5 Canvas Applications and Product Personalization Tools!Visit: /blog/using-fabric-js-html5-canvas-applications-product-personalization-tools/

In High Fidelity Complex Vector Documents

Today & in near future scenario, high fidelity complex vector documents continue to be, the ideal spot for SVG due to two best reasons. In highly detailed documents including CAD programs, the scalable portion of SVG provides a detailed view both as stand-alone documents & embedded in a webpage. This can also provides high fidelity printing. An uptake in governmental bodies moving further away from one vendor over another for publicly consumable electronic documents, like the following:

• Building, engineering & floor diagrams
• Electrical, aeronautical, and schematic diagrams
• Biological diagrams
• Organizational charts
• Maps

The best examples is displayed in the following illustrations.

The first image contains a diagram of the respiratory system and the periodic table of elements.

The second image shows the same diagrams zoomed in at 1000% http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml

When considering the usefulness of observing a large schematic in detail, or print the entire schematic, the SVG in scalability becomes perfectly clear and valuable.

In Real Time Data

The image as shown below display weather patterns graphically on a map:

As a common scenarios, canvas compliments to real-time data output. The user interaction is difficult with canvas. In presenting weather data today is either done fairly statically by images displayed on a server at certain intervals, or quickly through third-party plug-ins. Moreover as per ECWMF study indicates a cost savings for using SVG over server generated images, canvas leads in most graphical representations of weather patterns (and other quick, real time data).

In the image seen above, there is not necessarily a large surface to draw.
Moreover, the number of objects on the screen is considerably high. These can be quickly drawn and erased using the canvas API, without impacting the DOM. This scenario seems to be the key use case for the.

In Casual gaming (Two-Dimensional)

It is up to the developer’s choice (between Canvas and SVG) in casual gaming as simple two-dimensional web games. The concept of graphics is demonstrated by two games developed to showcase both and : SVG-oids and canvas-pinball.. Here the game and demonstration logic is entirely different, still the physics engine for both games tracks positions, collisions, velocities, and other physical aspects of the gaming components.

Conclusion

In an interactive way, the existing vector graphic technologies in the latest browsers enable existing and new scenarios to be satisfied with standard web technology. By using scenario driven features, we can move ahead and deliver graphically rich experience in web applications and pages.

To know more, how to give a cutting edge to your designing & creative need by loading SVG files with Canvas HTML5 using fabric.js, you may feel free to REACH US.