SVG Attribute Complete Reference
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. Attributes are the things that give the SVG shape, color, etc it will make the SVGs as attractive as you need.
List of SVG Attributes:
- SVG by Attribute
- SVG cx Attribute
- SVG cy Attribute
- SVG fill Attribute
- SVG fill-opacity Attribute
- SVG filter Attribute
- SVG flood-color Attribute
- SVG flood-opacity Attribute
- SVG font-size Attribute
- SVG font-size-adjust Attribute
- SVG font-style Attribute
- SVG visibility Attribute
- SVG from Attribute
- SVG fr Attribute
- SVG height Attribute
- SVG keyPoints Attribute.
- SVG keyTimes Attribute
- SVG lengthAdjust Attribute
- SVG letter-spacing Attribute
- SVG lighting-color Attribute
- SVG markerHeight Attribute
- SVG markerWidth Attribute
- SVG mask Attribute
- SVG media Attribute
- SVG numOctaves Attribute
- SVG opacity Attribute
- SVG operator Attribute
- SVG orient Attribute
- SVG path attribute
- SVG pathLength Attribute
- SVG patternContentUnits Attribute
- SVG patternTransform Attribute
- SVG patternUnits attribute
- SVG pointer-events Attribute
- SVG points attribute
- SVG pointsAtX Attribute
- SVG pointsAtY Attribute
- SVG pointsAtZ attribute
- SVG r Attribute
- SVG radius Attribute
- SVG repeatCount attribute
- SVG repeatDur Attribute
- SVG restart Attribute
- SVG rotate Attribute
- SVG rx Attribute
- SVG ry Attribute
- SVG scale Attribute
- SVG seed Attribute
- SVG shape-rendering Attribute
- SVG startoffset Attribute
- SVG stdDeviation Attribute
- SVG stitchTiles Attribute
- SVG stop-color Attribute
- SVG stop-opacity Attribute
- SVG stroke Attribute
- SVG stroke-dasharray Attribute
- SVG stroke-linecap attribute
- SVG stroke-opacity attribute
- SVG stroke-width Attribute
- SVG style Attribute
- SVG surfaceScale Attribute
- SVG systemLanguage Attribute
- SVG tabindex Attribute
- SVG tableValues Attribute
- SVG text-anchor Attribute
- SVG text-decoration Attribute
- SVG text-rendering Attribute
- SVG textLength Attribute
- SVG to Attribute
- SVG transform Attribute
- SVG type Attribute
- SVG vector-effect Attribute
- SVG visibility Attribute
- SVG width Attribute
- SVG word-spacing Attribute
- SVG x Attribute
- SVG x1 Attribute
- SVG x2 Attribute
- SVG xChannelSelector Attribute
- SVG xml:lang Attribute
- SVG y Attribute
- SVG y1 Attribute
- SVG y2 Attribute
- SVG yChannelSelector Attribute
- SVG z Attribute
Below example will give you a brief idea that how to use the SVG Attributes:
Example: In this example, we will create two SVG texts with different attribute effects.
HTML
<!DOCTYPE html><html><body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong> SVG Attribute </strong> <svg viewBox="0 0 300 50" <text y="20" textLength="100%"> A Computer Science portal. </text> </svg> <svg viewBox="0 0 450 50" <text x="170" y="50" text-decoration="line-through"> GeeksforGeeks </text> </svg> </center></body></html> |
Output:
SVG Attribute
Please Login to comment...