🌍 Public
Viewing a saved revision (read-only)
fc12a12b58c940908f4f8c50365207c2
Shapes and Colors with SVG and CSS
This example demonstrates how SVG shapes can be styled using both presentation attributes and CSS. It draws circles, rectangles, lines, and paths on a 960×500 canvas, with a transformation that scales the content. The code uses inline `fill` and `stroke` attributes, a grouped element with inheritance of stroke and fill properties, and CSS classes (`.lines`, `.lines path`) to control stroke color, width, and line joins. The SVG is embedded directly in HTML and styled with an external stylesheet.
AI-generated descriptionAn example including some commonly used features of SVG.