Notes

Pocket Guide to SVG by Joni van der Laag
Many developers and designers make use of SVG (Scalable Vector Graphics). It's a good choice since, unlike raster graphics, it can be scaled to any size without losing resolution or quality of the image. However, SVG is not an easy technology to grasp on because of the vast number of attributes and properties that it could possess. booksvg has created this helpful "pocket" guidebook to help simplify the syntax, and to dive into some of the nifty basics. The book is simple to read, contains lots of pictures of fruits, and has numerous code snippets, illustrations and explanations. The book's title is appropriately, since it provides a quick reference of the essential concepts to help designers and developers get the most out of this web-based vector graphic software.


SVG is made up of inline XML code that can be embedded into HTML. As such, a good understanding of the basic SVG syntax could aid in making these complex and wordy XML documents easier to manage and less intimidating.


One of the fundamental essential, and crucial, features of SVG is the workspace - or canvas, if you prefer which defines the location the place where elements are drawn relative to other elements in the same SVG. The viewBox attribute can be used to define this. If, for example, the viewBox attribute is set to 100px x 100px, and a pear has been drawn into the SVG then all other pears within the same SVG are shown to the left. This won't happen in the event that the viewBox has been changed to a different number.


Another key feature of SVG is the ability to control the way paints are mapped to shapes and paths. The attributes fill and stroke provide a range of options to colour these shapes and paths. The desc> attribute can also be used to add text to an SVG to explain its contents to screen reader users.



SVG attributes allow SVG elements to stack in different ways in comparison to other HTML elements. SVG defs> are used to define the two patterns, one for each shape. The stroke and fill attributes are used to paint the interiors of the forms.


The space between letters is an additional crucial SVG property. The SVG text> attribute kspace lets you set the spacing according to the font's kerning table, or specify a length. This will ensure that the spacing between letters is in line with similar glyphs within the font. This is especially useful when creating multi-language texts which require uniform appearance across languages. The SVG text> attribute has three additional attributes that are related to the text displayed. These are x/y, dx/dy, and dx/dy define coordinates absolute or relative.

Homepage: https://www.booksvg.store/