Level: Advanced
By: Robert Hritz
We’ve mentioned the benefits of using Scalable Vector Graphics (SVG) icons in a prior blog post, https://crossit.wpengine.com/an-intro-to-svg-icons-and-filemaker/; however, many people still are not aware of what an SVG icon truly is. SVG icons are XML files defined as an open standard by the World Wide Web Consortium, the same governing body that defined the HTML language and just about all other web languages. A major benefit is SVG icons can be manipulated just like HTML code. You can even define SVG icons in a web browser or a FileMaker web viewer. More importantly you can open and edit any SVG in the text editor of your choice. Tip: To edit simply right click on the SVG file and choose to open with a text editor.
Before you edit an SVG icon you need to understand how HTML and XML work. Both languages rely on the use of tags to define objects. If we consider XML and HTML in terms of grammar, tags are the nouns that XML and HTML sentences are built on. They state that something exists and are enclosed in carrots. For example, the SVG tag is shown as: <SVG>
Tags can have attributes, or adjectives, that describe detail(s) about them. Things like color, shading, and size are all considered attributes and define how the object, or tag, will be displayed to the user. Attributes are found within a tag, an example is shown below showcasing the width and height attributes for the SVG tag: <SVG width=”453.007″ height=”453.007″ >
With this basic understanding of the elements that make up an SVG icon you are well on your way to creating your own personal SVG icons within your solution. For more information on the SVG standard check out the links below.
