InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Inkscape tutorials

  • SVG - beginner tutorial
  • Animation using Inkscape and Jquery
  • How to create a logo using Inkscape
  • How to create and use color palettes in Inkscape
 
  • Home
  • > Tutorials
  • > Inkscape Tutorials

SVG – beginner tutorial

By admin | Last updated on Jan 11, 2016

Scalable Vector graphics is getting more popularity in online world as more and more browsers support svg now. Most images we see on web (.png, .jpg, .gif etc.) are Raster or bitmap images.

Here is the definition of SVG on Wikipedia

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

Raster graphics image

In computer graphics, a raster graphics image, or bitmap, is a dot matrix data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats.

Since SVG file contains a set of mathematical instructions, it can be converted to any size image as opposite to bitmap images. Bitmap images when resized to higher size, may not look good. Not all browser currently support SVG format but most modern browsers like Chrome, Firefox, and Internet Explore (9+) have some support fo svg format. So svg is still not used widely to serve images.

SVG is slower to render as compared to bitmap. SVG files are compact in most cases.

Where is SVG used

  1. Many web sites owners create their logo and other images in svg format and then convert it to various sizes bitmap images. So in case you are getting your logo designed, ask for svg format from the designer.
  2. Adobe illustrator Inkscape are two very popular tools to create and edit svg file. They also allow you to export svg files to bitmap format.
  3. Since svg only contains instructions to draw graphics, they can be used to create interactive graphics on web. It can be useful for HTML5 based games and apps in future.
  4. It can be used to automatically create images using scripting languages like python and perl based on predefined templates.

How does SVG format look like?

Svg format for drawing a rectangle looks like:

<rect width="80" height="80"
style="fill:#006fba;" />

This will produce a rectangle as shown below:

svg-rectangle

You can try out online svg editing and how it renders at this SVG Sandbox which creates a small square icon with a background color and a text field.

Suggested posts:

  1. How to create a logo using Inkscape
  2. Logo creation high level checklist
  3. How to create simple animation using Inkscape and Jquery
  4. How to create and use color palettes in Inkscape
  5. Ubuntu – dpkg and apt-get beginner tutorial
  6. Bulk convert jpeg files to png using sips on mac
  7. Convert mp3 to ogg on Mac using ffmpeg
  8. Online tools to create comic strips
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Inkscape Tutorials, SVG, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress