Select a page
Select a page

Charmed by SVG

Prompted by some of the new capabilities of FileMaker 14, I recently did some digging into SVG’s to see what was possible. I’ve been using SVG’s for a while, and first got interested in them back around 2008, as a way to produce high quality custom charts inside web viewers. At the time, the particular project was deployed on MacOS, where SVG support has been very good thanks to Web Kit. Over time, SVG support has been gradually improving and many new tricks have been discovered relating to web viewers in FileMaker.

This post is a rough exploration of SVG capabilities. I’ll look at some of the basic building blocks for SVG files. We will explore the current level of support for SVG in FileMaker. Finally, a wild stab with a couple of proof of concepts files. Much of this material was first shared earlier this month during the FileMaker Portland Meetup. If you are looking for a more in-depth SVG tutorial, this isn’t it, but there are plenty available.

SVG Introduction

SVG is an open standard file format for vector graphics. Unlike bitmap (raster) formats, vector graphics can scale well to any resolution or size. SVG is based on a XML, which make creation or manipulation possible with a common text editor. Equally important, these files are relatively easy to generate or manipulate in software without depending on complex libraries. The simplest SVGs are made from elementary geometric shapes.

1
2
3
4
5
6
7
 
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 110">
	<circle r="50" cy="55" cx="55" 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"/>
	<circle r="20" cy="55" cx="165"/>
</svg>

The above snip of code defines a working coordinate space from 0,0 to 220,110. Then it defines four circles. The first two have their fill removed and a stroke instead. The second two are smaller, and render with a default fill of black. Geometric primitives in SVG can have a fill and/or a stroke (outline). The resulting image can be seen here.

CSS Styles for SVG

Learning from the desire to remove redundant information and seperate style information from content, SVG also supports style sheets. If you were to convert the inline style information into CSS, your SVG file would look something like this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
 
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 110">
	<defs>
		<style type="text/css">
.eye_outer {
	fill: none;
	stroke-width: 5;
	stroke: black;
}
.eye_inner {
	fill: black;
}
		</style>
	</defs>
	<circle class="eye_outer" r="50" cy="55" cx="55"/>
	<circle class="eye_outer" r="50" cy="55" cx="165"/>
	<circle class="eye_inner" r="20" cy="55" cx="55"/>
	<circle class="eye_inner" r="20" cy="55" cx="165"/>
</svg>

Grouped objects in SVG

Another simple building block for SVG is the concept of a group. Just like you might group multiple elements in a WYSWYG graphics application, two or more elements can be combined in a group. Once grouped, operations can effect multiple items uniformly.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 110">
	<defs>
		<style type="text/css">
.eye_outer {
	fill: none;
	stroke-width: 5;
	stroke: black;
}
.eye_inner {
	fill: black;
}
		</style>
	</defs>
	<circle class="eye_outer" r="50" cy="55" cx="55"/>
	<circle class="eye_outer" r="50" cy="55" cx="165"/>
	<g id="pupils" transform="translate(15,15)">
		<circle class="eye_inner" r="20" cy="55" cx="55"/>
		<circle class="eye_inner" r="20" cy="55" cx="165"/>
	</g>
</svg>

Button Glyphs in FileMaker 14

An exciting new feature for FileMaker 14 introduces SVG icons for buttons and button bars. This is an obvious enhancement because vector based icons will look good on devices of different size and resolution. SVG graphics are typically very small to deliver and integrate well with newer FileMaker platforms like Web Direct.

FileMaker has produced some very good documentation explaining which parts of the SVG standard have been implemented. Additionally, they have allowed us to affect the presentation of SVG’s by applying style to the graphics when presented in a FileMaker layout. Now, in the same way that you can adjust the theme of your website with a few CSS edits, you can also alter the theme of your FileMaker button icons through the inspector, FM themes, conditional formatting, etc.

It is important to know that SVG’s must be designed to support external CSS support. In the same way that you would remove in-line style information from HTML elements you plan to reuse, you must consider and remove some in-inline style information from an SVG before using it as an icon. The specific area of concern is currently the “fill” attribute. Any part of an SVG that has a specific fill color defined will take precedence over FileMakers inherited controls.

In the code below, I’ve highlighted the parts of this SVG source code that would specifically inhibit FileMaker’s fill styling.

1
2
3
4
5
6
7
 
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" >
	<circle r="50" cy="55" cx="55" 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>

Any specific fill value, even “none”, will override FileMaker’s style. Another important point, is that FileMaker doesn’t style strokes. If you find a nice looking SVG, but it uses strokes, then it can not be re-colored by FileMaker. The SVG could likely still be used, but color couldn’t be influenced inside FileMaker. It certainly is possible to geometrically redefine the SVG to be made up of filled polygons instead of strokes and there are tools available to perform this task.

Even with this great improvement, FileMaker 14 has not added SVG support elsewhere. You still are not able to natively place SVG’s on a layout, render them from a container, or use them as a background or fill. Outside the mentioned buttons and button bars, the only other way to present SVGs in FileMaker is by using a WebViewer. This feature is inherited by the underlying web platform of your operating system. WebKit on Mac and iOS and Internet Explorer on Windows. The following examples were tested in FileMaker 13, and I suspect they would also work just fine on FileMaker 12. On Windows, you might need to make sure your Internet Explorer is patched to a sufficient level.

Mixed HTML and SVG Markup

An exciting development in modern web browsers is the support of SVG markup directly inside an XHTML file. When constructing a web page this means you can inline graphics without the browser making additional image requests over the network. Even more, the SVG elements have been adopted into the browser’s DOM. This means that a single style-sheet can control the look of your webpage and also your graphics.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
h1 {
	color: green;
}
.eye_outer {
	fill: none;
	stroke-width: 5;
	stroke: black;
}
.eye_inner {
	fill: black;
}
	</style>
</head>
<body>
	<h1>Charmed by SVG</h1>
	<p>Hello FileMaker Portland</p>
	<!-- Inline an SVG right inside the HTML. It could be the only element in the whole page or mixed into a larger page. -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 110" width="100%">
		<circle class="eye_outer" r="50" cy="55" cx="55"/>
		<circle class="eye_outer" r="50" cy="55" cx="165"/>
		<g id="pupils" transform="translate(15,10)">
			<circle class="eye_inner" r="20" cy="55" cx="55"/>
			<circle class="eye_inner" r="20" cy="55" cx="165"/>
		</g>
	</svg>
</body>
</html>

This is just the tip of the iceberg. Because the SVG(s) are unified in the DOM, they can be accessed and manipulated using JavaScript.

Hashchange

The native WebApp platform is loaded with all sorts of goodies. Many of us have been handling various web events like onclick or mouseover for a long time. Another helpful event to handle is called Hashchange. Basically, it is possible to move from one part of a page to another without a reload. In the early days, a long page might have multiple sections with simple navigation anchors that scroll you to that section. Going further, you could bookmark or share a url directly to that specific section with a URL annotated with a # segment.

It turns out that the request to select a new hash can be intercepted as an event and then handled in javascript. I’ve posted a sample page which shows some simple hash change handling. In a separate window, go to this URL

https://scalefm.com/pub/svg-samples/hash-sample.html

Next, send a message to the page asking the eyes to move. (This will not do anything when using IE as your browser.) Use your cursor and keyboard to change the ending text as so and press return.

https://scalefm.com/pub/svg-samples/hash-sample.html#moveEyesTo=10,10

Finally, ask the page to display a display an alert dialog. Change the hash portion of the URL and press return again.

https://scalefm.com/pub/svg-samples/hash-sample.html#alert=test-message

Notice that each hash change sends a message to the current page. When the hashchange happens, I’m using javascript to trigger a new animation on the pupils. The page does not reload, but rather the pupils can navigate from the previous location to a new one. However, if you use your cursor to enter the URL field and press return without changing anything, the page WILL reload. This behavior is important to recognize.

The Hashchange event is well supported in many browsers. Unfortunately SVG animation support is a little slower to catch on. The technique I’m using, SMIL animations, are not yet supported in Internet Explorer.

Send messages to FileMaker Web Viewers via Hashchange

An intriguing development is to send messages to FileMaker web viewers using this same hashchange vent. The very simple premise for this communication method into web viewers follows this outline.

  1. Define a FileMaker solution where a small web page is embedded. You could embed this as raw text in a script step or maybe in a database field.
  2. Using a script, export this HTML text snip into a file in your temporary directory.
  3. Compute the appropriate path for that file, such that it can be accessed with a file:// url in either web browser or web viewer.
  4. Initialize the web viewer by telling it to go to that base url you just computed.
  5. Once the web viewer is loaded, you can send it a message by telling that web viewer to go to a new url. This new URL is formed from the same base, but with a new hash element added.
  6. Repeat step 5 as often as you want without loosing the state of the web viewer. Make sure not to load the same URL twice in a row, which would cause a reload and destroy the state of the web viewer.

Download and try out this simple FileMaker file that demonstrates these steps.

Sample File Download: FileMaker-Eyes-SVG.fmp12

Note, the example file demonstrates both hashchange messaging and SVG animation support inside FileMaker. Unfortunately, the animation portion of this demo only functions on Mac and iOS. If you are running on Windows, this demo file still can be used to explore the messaging technique, even though the animations don’t fire.

Consider the Range of Possibilities

There are examples of both dynamic HTML and SVG components available on the web. Here is another example that demonstrates how you might use an animated SVG as a way of indicating the current section of your application.

Sample File Download: FileMaker-Section-Marker-SVG.fmp12

Helpful Links & Resources

About the Author

Chris Irvine is a custom solution developer and IT consultant at Threeprong.com LLC, certified in FileMaker 12 and 13. Threeprong provides process efficiency consulting, custom development on multiple platforms, FileMaker performance scaling, and IT solutions for businesses across many industries.

Posted byChris Irvine
June 23, 2015
Tags:, , , , ,
0
2

Related Articles

2 Comments

Leave a reply