Want to know more about SVG Glyphs and FileMaker?
Bob Shockey of Alchemy Group wrote a great blog post about SVG Glyphs last summer, and it’s something every FileMaker developer should read:
SVG is a compact vector description that uses XML at its core to describe the image. Unlike a bitmap, which uses a pixel-by-pixel description of the image, an SVG file uses a combination of coordinates to describe the various elements of the image. SVGs can be (sometimes — see below) colored any way you want, scaled to virtually any size with no loss of detail (or creation of jagged edges) — and all of this in a way that is economical in terms of the amount of data needed to describe them to the app. Web browsers have long been able to work with SVGs, and now FileMaker Pro and FileMaker Go are?able to do the same thing, with the same fantastic benefits.
Like most standards, SVG has evolved over time, and the people and apps that create them have several options available for describing various aspects of the image. FileMaker recognizes certain parts of the SVG format and ignores others, some of which is detailed below.
Read the whole post–it’s well worth the time.
There is a lot to know on the subject of FileMaker SVG Glyphs. Here are some posts I found instructive:
- Matt Larson: SVG Custom Icons and FileMaker 14
- Emory Brown of DB Services: Custom Button Icons
- Voltron2112: Indats Icon Manager
- Chris Irvine of ScaleFM: Charmed By SVG
- Claus Lavendt : Free SVG Tool for FileMaker
The biggest (but not only) takeaway is simple: Use a text editing program (I like TextWrangler for the Mac–it’s free and powerful) to remove the “fill=” description from the file (example from the Charmed by SVG post):
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" > fill="none" stroke-width="5" stroke="black"/> <circle r="50" cy="55" cx="165" fill="none" stroke-width="5" stroke="black"/> <circle r="20" cy="55" cx="55" fill="blue"/> <circle r="20" cy="55" cx="165" fill="blue"/> </svg>
Do that, and FileMaker can now use CSS to change the color of the SVG Glyph.
Be sure to read all the posts.