SVG
SVG
This is just a blog for flatiron school.
What is SVG and why is it important?
SVG short for Scalable Vector Graphics. In short it’s just an Vector based image format. It uses plain text to describe lines, curves, shapes, colors, and text. Here’s an example of what SVG looks like in code for the letter L.
What’s powerful about it is that SVG doesn’t lose quality when you zoom in or out on it, big or small. This give SVG a flexibility that PNG, GIF, JPG doesn’t have.
Scalability
Because SVG uses shapes, numbers, and coordinates to render graphics in the browser (rather than pixel grid) it makes it resolution independent and can scale infinitely. So they will look clear at any size.
Where GIF, JPG, PNG all have fixed dimensions. It’s fine to scale it down, but when scaling it up, it becomes very pixelated.
Performance
SVG is easily scriptable, which allows you to change it and interact with it using CSS and/or JavaScript. Also because it is just text, the file scale is a lot smaller than an image.
When to use it?
SVG can be used for many things. Here is some examples.
Logo and Icons
Logo and Icon often need to be clear and sharp at any size. For example, here is how a logo for the Santandar bank is in code.
Charts, Graphs, Maps
Very often SVG is used to plot data and it changes depending on user actions or certain event that triggers the change.
https://observablehq.com/@mbostock/tadpoles
Interfaces and Special Effects
A lot of the interface can be easily created by SVG and because you can use script to interact with it, you can make any sort of effects to it like Scaling, Distorting it, or any other special effect you can think of.
Useful tool D3.JS
Since we will be going into Javascript, here’s a useful library for manipulating SVG in JS.
For example, here is how a circle can be created and manipulated
Where D3.Select is choosing where to add the circle in the HTML.
.append is just basically what shape we are adding.
.attrs we are adding basic position/size/color etc.
.on is where we start to manipulating the code. Where on Click, this we will call the class function onClick. Also you can see we mess with on Start (when it gets initialized) and on Drag (dragging with mouse)
The Pressing Game
Another Example of something I worked on is this intractable website. Called the Pressing Game.
The pressing game is tool for computational phylogenetics. One species’ genetic code maps to another via a sequence of swaps of adjacent substrings of genetic material; the number of swaps it takes to go from one species’ code to another is a measure of evolutionary distance between those species.
The pressing game allows one to find the shortest sequence of swaps to perform such a mapping.
In the game, you start with a bicolored graph — a graph in which all the vertices are one of two colors. You press a vertex and it changes the colors of vertices in its “neighborhood” (adjacent vertices), and complements the induced graph, or produces a modification of the graph such that pairs of vertices in the neighborhood of the pressed vertex that previously were connected are now disconnected, and those that weren’t now are. The goal is to make all vertices one color and remove all connections.
Conclusion
Basically I hope I introduced what SVG is and why it is useful for web development.
