Google Choice: SVG

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.
💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.
🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.
🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.
✔ Latest world News

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

Monday, March 13, 2017

SVG - Overview

What is SVG?

SVG, Scalable Vector Graphics is an XML based language to define vector based graphics.
SVG is intended to display images over the web.
Being vector images, SVG image never loses quality no matter how they are zoomed out or resized.
SVG images supports interactivity and animation.
SVG is a W3C standard.
Others image formats like raster images can also be clubbed with SVG images.
SVG integrates well with XSLT and DOM of HTML.

Advantages

Use any text editor to create and edit SVG images.
Being XML based, SVG images are searchable, indexable and can be scripted and compressed.
SVG images are highly scalable as they never loses quality no matter how they are zoomed out or resized
Good printing quality at any resolution
SVG is an Open Standard

Disadvantages

Being text format size is larger then compared to binary formatted raster images.
Size can be big even for small image.

Example

Following XML snippet can be used to draw a circle in web browser.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

Embed the SVG XML directly in an HTML page.
testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Output

Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. In Internet Explorer, activeX controls are required to view SVG images.

How SVG integrates with HTML

<svg> element indicates the start of SVG image.
<svg> element's width and height attributes defines the height and width of the SVG image.
In above example, we've used a <circle> element to draw a circle.
cx and cy attribute represents center of the circle. Default value is (0,0). r attribute represents radius of circle.
Other attributes stroke and stroke-width controls the outlining of the circle.
fill attribute defines the fill color of the circle.
Closing</svg> tag indicates the end of SVG image.

পৃষ্ঠাসমূহ

Labels

Search Your Article

CS