GeorgeBerdovskiy
commented
7 months ago SVG code that looks like this...
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" style="border: 1px dashed lightgray;">
<!-- P1 -->
<circle cx="calc(0px + 3px)" cy="calc(100px - 0px - 3px)" r="3" fill="red" name="P1"/>
<!-- P2 -->
<circle cx="calc(50px + 3px)" cy="calc(100px - 75px - 3px)" r="3" fill="red"/>
<!-- P3 -->
<circle cx="calc(60px + 3px)" cy="calc(100px - 80px - 3px)" r="3" fill="red"/>
</svg>... will look like this when rendered!
Check out W3Schools for interactive SVG tutorials you can play around with in your web browser.
viveknarayana
Background
While pure HTML and CSS may be enough for simple graphics like bar and column charts, we'll need a slightly better format for charts that require curves, circles, triangles, and so on.
The format in question is none other than SVG, which stands for Scalable Vector Graphics. You may have seen images with the
.svgextension before - that means you can scale them up and down without losing quality! This makes SVGs a popular choice for logos and icons, but in our case, they can also be used for scalable charts.How Do They Work?
SVGs are defined using paths. You can think of your web browser (or whatever application you're using) as a painter, and the SVG file as a set of instructions that specify which brush strokes they should use to draw an image.
Here is a very good article on SVG paths, and you'll definitely want to read through it before starting the issue.
Goal
Instead of building a chart using SVG paths right away, we will tackle a much smaller challenge - creating a helper that renders an SVG graphic. For more information on helpers in Ruby on Rails, see issues #1 and #2.
Please name it
dot_svg_renderand use the information from the article above to render an SVG that looks something like this -It doesn't have to be exact - just some dots scattered around will do. Good luck!