SVG ( MDN Tutorial ) is a very simple text format (XML) that you can easily generate using Ruby without any SVG library and view it in any modern web browser. Here is one example:
SVG points through line interpolation
points = (0..5).map{ [rand(100)-50,rand(100)-50] } puts <<ENDSVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200"> #{points.map{ |x,y| "<circle cx='#{x}' cy='#{y}' r='3' />" }.join("\n")} </svg> ENDSVG
If you want to be more structured than string interpolation:
SVG Points Using Nokogiri XML-Builder
require 'nokogiri'
Save the output as "foo.svg" and open it in a modern web browser for viewing.
Drawing
To draw rectangles, you can use any of:
<rect transform="rotate(45)" x="0" y="0" width="100" height="200" /> <polygon points="0,0 100,0 100,100 0,100" /> <path d="M0,0 L100,0 100,100 0,100 Z" />
A polygon can be the easiest to create if you want to connect arbitrary points that are not oriented along the axes without worrying about transformations. Please note that while I have clearly shown the coordinates above in the format x,yx,y , SVG will also take x,y,x,y or xyxy if these files are easier to create.
Format bit
If you want to draw outlines instead of filled shapes, you can add this CSS to your SVG:
<style> rect, polygon, path { fill:none; stroke:black; stroke-width:1px } </style>
Using Haml for XML
Finally, Haml is another option that you might consider creating your XML without the SVG library:
@points = (0..7).map{ [rand(100)-50,rand(100)-50] } require 'haml' puts Haml::Engine.new(<<ENDHAML).render(self) %svg(xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200") :css circle { fill:orange } rect, polygon, path { fill:none; stroke:black; vector-effect:non-scaling-stroke } - @points.each_slice(4) do |rect| %polygon{ points:rect.join(" ") } - @points.each do |x,y| %circle{r:3, cx:x, cy:y} ENDHAML