Truly getting into SVG might require reading not just one but several posts on the subject, I am not sure if I really want to get into the depth of SVG myself. However it is certainly something that I should write at least one post on. So this will be just the usual basic getting started post, and if I get some time maybe I will expand the content on this post as needed.
- The source code examples are On Github
1.1 - inline svg graphics
With inline svg graphics the svg elements as well as all other elements with svg can just be included in the html itself just like all the other html elements. This can be used in conjunction with inline scripts as a way to access the svg in a very simulate way of accessing the pain old document object model as usual.
1.2 - external svg graphics
With the external.svg file it will need to be formated in xml and might look something like this example I worked out that makes use of many of the most basic, yet still useful elements there are to work with.
2 - Scaling SVG
The whole thing about Scalable Vector Graphics is that they are, well scalable. So of course I should have a section in which the cous is how to go about getting started with this sort of thing, and also start a section in which I will write about any additional advanced topics surrounding the topic of scaling with SVG.
2.1 - The viewBox attribute
When it comes to getting started with scaling there is the viewBox attribute of the root svg node that should maybe be the first place to start. So for this example I am just starting out with that when it comes to using this veiwBox attribute along with the width and height properties of the root svg element. So then the width and height values of the root svg node are how to go about setting the total width and height of the svg node, and the viewBox attribute is then how to go about defining an area to zoom into by giving a set of four values for the x, y, width and height values that are a box area to zoom into.
4 - Conclusion