Reports from our 2017 Meetings
Reports from our 2017 Meetings
This month we investigated SVG or scalable vector graphics so we could spread the word about finding Harry Potter’s Deathly Hallows. That is we created a web page using SVG to tell everyone about the symbolism of the Deathly Hallows as used in the Harry Potter movies.
What are scalable vector graphics? As the name indicates this creates scalable graphics. Most photo or image graphics are pixel based and the image quality will detriete when enlarge over its original size. Scalable vector graphics are in simple terms a line drawn between two points or vectors and therefore can be scaled up to any size. This is because a line starting at X and ending at Y will expand to fill the space defined on the screen or viewpoint as X and Y regardless of the screens physical size.
To get a handle on SVG we had a look at the articles at Sitepoint written by Craig Buckler including SVG an overview and SVG Drawing Basics
Firstly SVG are an XML based format using tags just like HTML. Because the files have tags they can be selected using CSS just like any HTML tag. That means the file can became part of your style scheme. The file is saved with as an svg.
These are the main ways to include SVG in an HTML document that Craig wrote about.
The svg code is written inside an SVG tag of an HTML 5 document.
<svg width=”300” height=”300”
<ellipse fill="#FFFFFF" fill-opacity="1" stroke-linejoin="round" stroke="#000000" stroke-opacity="1" cx="312.667" cy="286" rx="140.667" ry="140.333"/>
</svg>
Add the file as the source (scr) file of the img tag
<img scr="”image.svg”">
Add in an object file, in an embed tag and inside an iframe.
See Craig’s article Adding svg to a web page.
Drawing an svg diagram can be complicated as the co-ordinates for a large diagram gets quite extensive, as in this example of a ellipse.
<ellipse fill="#FFFFFF" fill-opacity="1" stroke-linejoin="round" stroke="#000000" stroke-opacity="1" cx="312.667" cy="286" rx="140.667" ry="140.333"/>
There are several drawing packages that allow you to drawn and save a diagram as an SVG. The one I like is Expression Design by Microsoft, its free. There are several online drawing tools like Inkscape. While Bluegriffon nhas a built-in SVG editor.
That editor looks like the “SVG Editor” you can download from Google.
We then had some fun drawing the Deathly Hallows in SVG and experimenting with the various ways in which we could attach these files to our site.
Steve South
Sig Leader