Previous Next

SVG Fill

Fill is attribute is used to fill color in shapes.

Syntax

fill="color"

You can use fill attribute in any shape to apply color.

Opacity

Opacity attribute is used to make any shape blur in color or completly transparent.

Syntax

fill-opacity="value"
stroke-opacity="value"

stroke opacity attribute is applied to those shapes which do not support fill opacity attribute like SVG lines etc. You should use stroke-opacity for lines or any other shape which does not support fill opacity and you can give 0.0 to 1.0 value to opacity.

You can use SVG fill any where within an HTML document.

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <svg> element to draw svg line on webpage
• Give width and height of 300 300 respectivelly to SVG element
• Give 0 100 200 100 values respectivelly to line attributes x1 y1 x2 y2
• Stroke width should be 10
• Stroke color should be olive and fill color should be black
• Apply opacity attribute to line

save file with name task.html or task.htm and then open it using any browser and see results.

SVG Code Generators

Try our SVG generators to practice and generate SVG code in real time.

Previous Next