top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to use vector image in HTML?

+1 vote
494 views

What is Vector Image?

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics.
 
Vector graphics is the creation of digital images through a sequence of commands or mathematical statements that place lines and shapes in a given two-dimensional or three-dimensional space.
 
How to Create a Vector Image in Web Page?
 
Using SVG we can draw a vector image.Some of ways for using SVG in webpage.
 
1. Using an <object> Tag
 
<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>

2. Using an <embed> Tag
<embed type="image/svg+xml" src="image.svg" />
3. Within an <iframe>
<iframe src="image.svg">Your browser does not support iframes</iframe>

4. Inline SVG XML Embedded Into Your HTML5 Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Embedded SVG</title>
</head>
<body>
<h1>Embedded SVG</h1>

<!-- SVG code -->
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
	<text x="10" y="50" font-size="30">My SVG</text>
</svg>

</body>
</html>
5. Using an <img> Tag
<img src="image.svg" />
6. Using a CSS Background Image
#myelement
{
	background-image: url(image.svg);
}
 

References

http://www.sitepoint.com/add-svg-to-web-page/
posted Aug 11, 2015 by anonymous

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

Importance of SVG and Canvas in HTML5?

In HTML , SVG and Canvas are two important graphics features.It is a Vector graphics technology.

What is Vector Graphics?

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics.

Vector graphics range in complexity from simple to moderate to extremely complex. The following are some basic examples.

  1. Simple - Callout in a document or illustration.
  2. Moderate - Illustrations such as charts, diagrams and maps.
  3. Complex - Documents such as those used for engineering.

Canvas

Canvas is a bitmap with an immediate modegraphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.

More Information about canvas - http://tech.queryhome.com/51054/about-html5-canvas

SVG

SVG is used to describe Scalable Vector Graphics

SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.

More Information about SVG - http://tech.queryhome.com/50869/about-svg-part-1

A Comparison of Canvas and SVG

Canvas

Pixel-based (canvas is essentially an image element with a drawing API)
Single HTML element similar to image in behavior
Visual presentation created and modified programmatically through script
Event model/user interaction is coarse -- at the canvas element only; interactions must be manually programmed from mouse coordinates
API does not support accessibility; markup-based techniques must be used in addition to canvas

SVG

Object Model-based (SVG elements are similar to HTML elements)
Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is object-based at the level of primitive graphic elements -- lines, rectangles, paths
SVG markup and object model directly supports accessibility

Video Tutorial for svg and canvas

https://www.youtube.com/watch?v=_OiVBQY9hG0

Both Canvas and SVG are important components of the HTML5 graphically rich Web.Right now there are a lot of supporting libraries available on web for both svg and canvas. If I name a few Kinetics.js, Fabric.js, Raphael.js, Paper.js and many-many more. These libraries are there to make us work with these two technologies in an easy way.

Images for svg and canvas features

Image svg-canvas

 READ MORE
...