00:00:11.620
So in case you guys don't know me, my name is Starr Horne. I work for Honeybadger, where we do exception monitoring and uptime monitoring. Today, we're going to be talking about SVG charts and graphics in Ruby.
00:00:18.980
I was excited to give this talk because many people tend to think that the only way to add interesting charts and visualizations to web applications is via JavaScript. However, that's not the case. You don't need a 900 kB JavaScript library to generate simple charts. Instead, you can use SVG and Ruby.
00:00:32.780
SVG is actually quite simple. There's really no reason why we can't manipulate it ourselves in Ruby. There's nothing magical about SVG, despite how a lot of developers view it as a complicated black box.
00:00:40.550
To truly appreciate this, we need to look back at its history. SVG is one of the most amazing technological comebacks of all time in the realm of web standards. If we rewind to 1999, which is when SVG came around, XML had just been invented, and people thought it would save the world. It was an era when tools and technologies such as KDE were emerging.
00:01:06.409
However, I can't help but feel disappointed with how the web has turned out since then. I thought by now, I'd be browsing the web in 3D using VRML, interacting with a birthday cake and a creepy rabbit. Instead, I'm still looking at text, and I thought we'd be using XSLT for all that.
00:01:17.870
Fortunately, one of the standards, SVG, is making a comeback. For those who don't know, SVG stands for Scalable Vector Graphics. The big difference between SVG and raster graphics is that raster images are made up of pixels. When you scale a 10x10 raster image by two, to a 1,000 by 1,000, it will look terrible.
00:01:31.310
On the other hand, vector images are constructed using mathematical equations, so they don't have fixed pixel dimensions. You can scale them up or down, and that flexibility is crucial today. The manufacturers of computer monitors have been advancing rapidly, offering devices like Retina MacBook Pros and 4K monitors, which significantly impacts web development.
00:01:52.130
Previously, I could export a logo from Photoshop, and it would look decent on most screens. Now, however, viewing that same logo on a Retina screen can result in a blurry image. The typical solution of doubling the resolution creates files twice the size, which becomes problematic for mobile networks.
00:02:10.399
SVG addresses this issue because it makes logos, images, and graphics look sharp regardless of the screen resolution. For instance, the RailsConf logo is an SVG file available for download on their website. Unfortunately, Keynote does not support SVG, so I had to use a PNG screenshot instead.
00:02:30.740
In addition to logos, you can use SVG for animations, games, and visualizations—an area where D3.js excels. If you haven't explored D3.js, I highly recommend checking out its demos. It allows for an incredible variety of visualizations, such as plotting the spread of a zombie virus across the U.S.!
00:02:51.509
D3.js serves as the backbone for many graphing frameworks. For example, Rikshaw uses D3.js for the heavy lifting, and at Honeybadger, we use simple sparklines to convey information like memory usage and CPU load in our user interface.
00:03:10.909
I often go through our front-end code looking for places to reduce JavaScript file sizes, and I noticed that D3.js code, when minified, is about 100 kilobytes. That code can produce complex visualizations, but I realized that generating SVG directly might offer more efficiency.
00:03:32.070
Thus, I decided to explore how SVG is generated. SVG is just XML, so I questioned why I couldn't build it using Ruby.
00:03:44.780
To use SVG in your web applications, the easiest method is to refer to it as an image, allowing you to utilize caching. However, doing so prevents you from manipulating the graphics with JavaScript or CSS since it's an external resource.
00:04:02.120
A better approach would be to embed the SVG directly into your HTML. This way, you can leverage CSS and JavaScript for real-time manipulation. SVG tags and HTML tags are relatively similar in structure.
00:04:24.210
For example, to create a circle in SVG, you use the <circle> tag with attributes like radius and center point, formatted as XML. In addition to circles, SVG supports ellipses, squares, lines, and paths, among others.
00:04:38.590
SVG also allows the embedding of raster images, which can be referred to externally or embedded as base64. You can apply filters and effects, replicating many image manipulation functions you'd find in software like Photoshop.
00:05:06.519
SVG elements operate similarly to HTML elements, meaning you can assign classes and IDs to them, applying CSS for style adjustments. Attributes differ slightly, so instead of 'border,' you use 'outline,' and instead of 'color,' you use 'stroke' and 'fill.'
00:05:21.929
Using JavaScript, you can manipulate SVG elements just like DOM elements, allowing for dynamic interaction within your web applications.
00:05:43.199
For example, while freelancing, I worked with a client who wanted an online flyer creator. Designers would create templates in Illustrator and export them as SVG to be imported into our web app, where users could customize these templates.
00:06:06.560
SVG can also be utilized for sprite sheets, offering advantages over font icons. Unlike font icons, which don't represent the shapes meaningfully, SVG allows you to define and style shapes with CSS.
00:06:18.820
Now that I've explained the basics of SVG, let’s discuss charts. The charts we use at Honeybadger inspired this talk.
00:06:25.439
We'll start by building a simple bar chart. Bar charts are straightforward, consisting of several rectangles next to one another. For instance, if we draw three rectangles with heights of 50, 75, and 100, we can visualize our data.
00:06:44.639
The original representation may look unattractive or upside-down because SVG, like most computer graphics, has its origin in the top-left corner, whereas many standard charts place the origin at the bottom left.
00:07:02.210
To remedy this, you can add some styling with stroke width and fill attributes, resulting in a more visually appealing bar chart. Next, let’s consider interactivity.
00:07:21.050
For interactivity, I often treat SVG as if it were HTML. For example, when a user hovers over a bar, we can display its value.
00:07:37.030
By using the <g> tag, which stands for 'group,' I can combine a rectangle and text. I can set the text opacity to zero by default, and make it visible upon hovering over the group.
00:07:51.679
While this may not be the prettiest implementation, it lays the groundwork for a functional and interactive chart.
00:08:00.660
Now let’s move on to line charts, which introduce the path tag. The path tag is more complex than the basic shapes like circles and rectangles because it requires a 'd' attribute that contains drawing commands.
00:08:20.960
For example, we move to coordinate (0,10) without drawing anything, then draw lines to subsequent coordinates. This creates a simple line chart.
00:08:38.110
To transform this into an area chart, I need to draw another path that fills the area beneath the line. I just take care to close it, with the 'Z' command marking the end.
00:09:01.240
To enhance the chart further, dots can be added to indicate data points, simply by using the <circle> tag.
00:09:23.250
You can style these elements using attributes similar to those used previously and make the visualization as detailed as desired.
00:09:32.920
The math involved in creating these charts is relatively straightforward. The key steps are converting raw data into a usable graph space and positioning the values appropriately.
00:09:45.580
For instance, if you have raw data points, you might convert them into a scale from 0 to 100 for percentage display. Using a scale and an invert function assists in getting the proper placements.
00:10:10.140
Now let's up our game and create donut charts. Donut charts consist of two paths, typically one colored and one gray.
00:10:33.480
The paths' D attributes guide the drawing of arcs, which are crucial to creating donut shapes. You will see the radius specified, and various flags indicate the direction of the arcs.
00:10:50.050
If you'd like, you can further adjust the math to ensure the chart behaves like a clock, where zero begins at the top, enhancing the visual representation.
00:11:10.010
SVG is powerful, offering various transformation capabilities. You can set colors and dynamically adjust your charts. Issues like polar coordinates can be expressed through percentages for measurement.
00:11:27.980
When implementing SVG in Ruby, it works similarly to HTML, which makes it relatively simple. You can use builders, HTML, or construct SVG standalone files.
00:11:45.070
Utilizing string concatenation is another option, allowing more straightforward SVG creation without worrying about complex scripts.
00:12:04.830
I encourage you to play around with SVG to discover its possibilities. It's a fun tool that can enhance your front-end development significantly.
00:12:22.760
However, SVG does have some limitations. The most glaring issue is a lack of word wrapping and multi-line text support, which is a hindrance for web developers.
00:12:34.920
Additionally, comprehensive documentation can be hard to find. Often, specification pages provide more complexity than necessary.
00:12:50.080
Older versions of Internet Explorer might not support SVG, and while IE 9 handles it reasonably well, expect quirkiness compared to modern browsers.
00:13:05.560
If you're looking for resources to learn SVG, there's a commendable book published by Microsoft that might be of interest.
00:13:12.250
Thank you for being here! If you’re interested in learning more, I often post on my blog and share updates on Twitter.
00:13:36.030
Now, does anyone have any questions?
00:13:45.240
As for building SVG, when I started, I found it easiest to use a text editor and load the files in Chrome to see the visual changes.
00:14:02.440
You can also export SVG from Illustrator, tweak it, and understand how it works by editing the hex code directly.
00:14:09.900
Regarding unit measurements in SVG, many dimensions are expressed in pixels, but because SVG is scalable, it often assumes relative measurements based on viewboxes.
00:14:19.450
If you receive large SVG files from designers, you might want to inspect the SVG in a text editor. You can remove unnecessary elements and embedded images that increase the file size.
00:14:30.680
To maintain efficiency, you can also serve your SVG as compressed files, which might alleviate size concerns.
00:14:49.130
SVG performance largely depends on the complexity of the graphics and the hardware being used to view them.
00:15:05.960
When comparing SVG to raster images, SVG tends to perform better on larger scales. As the pixels size grows, SVG often yields smaller file sizes.
00:15:22.130
Lastly, SVG can be made dynamically responsive—changed in real-time based on user data. Libraries such as Snap.js or D3.js facilitate this functionality.
00:15:35.870
If there are no other questions, thank you for your attention! I hope you feel inspired to explore SVG.
