SVG drawings and images are created with different elements. Here, you can find a table of SVG elements with corresponding descriptions and attributes.<\/p>\n\n\n\n
| Element<\/th> | Description<\/th> | Attributes<\/th><\/tr><\/thead> |
|---|---|---|
| <a><\/td> | Creates a link to other web pages, files, email addresses, locations on the same page, or any other URL.<\/td> | xlink:show xlink:actuate xlink:href target<\/td><\/tr> |
| <altGlyph><\/td> | Controls the glyphs used to render specific character data.<\/td> | x y dx dy rotate glyphRef format xlink:href<\/td><\/tr> |
| <altGlyphDef><\/td> | Specifies a substitution set for glyphs.<\/td> | id<\/td><\/tr> |
| <altGlyphItem><\/td> | Specifies a candidate set of glyph substitutions.<\/td> | id<\/td><\/tr> |
| <animate><\/td> | Specifies how an element\u2019s attribute changes over time.<\/td> | attributeName=”the name of the target attribute” by=”a relative offset value” from=”the starting value” to=”the ending value” dur=”the duration” repeatCount=”the number of time the animation will take place”<\/td><\/tr> |
| <animateMotion><\/td> | Makes a referenced element to move along a motion path.<\/td> | calcMode=”interpolation mode for the animation. Can be ‘discrete’, ‘linear’, ‘paced’, ‘spline'” path=”motion path” keyPoints=”how far the object will move along the motion path for each keyTimes values” rotate=”rotation transformation” xlink:href=”URI reference to the <path> element specifying the motion path”<\/td><\/tr> |
| <animateTransform><\/td> | Animates a transformation attribute on the target element, allowing animations to control translation, rotation, scaling, and\/or skewing.<\/td> | by=”relative offset value” from=”starting value” to=”ending value” type=”transformation type which is to have its values change in time. Can be ‘translate’, ‘scale’, ‘rotate’, ‘skewX’, ‘skewY'”<\/td><\/tr> |
| <circle><\/td> | Specifies a circle.<\/td> | cx=”x-axis center of the circle” cy=”y-axis center of the circle” r=”radius of the circle”. Required. presentation attributes: Color, FillStroke, Graphics<\/td><\/tr> |
| <clipPath><\/td> | Specifies a clipping path.<\/td> | clip-path clipPathUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. default: ‘userSpaceOnUse’<\/td><\/tr> |
| <color-profile><\/td> | Specifies a description of the color profile used for the image.<\/td> | local=”unique ID for a color profile stored locally” name=”” rendering-intent=”auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric” xlink:href=”URI of an ICC profile resource”<\/td><\/tr> |
| <cursor><\/td> | Specifies a platform-independent custom cursor.<\/td> | x=”x-axis top-left corner of the cursor (default is 0)” y=”y-axis top-left corner of the cursor (default is 0)” xlink:href=”URI of the image to use as the cursor”<\/td><\/tr> |
| <defs><\/td> | Stores graphical objects that will be used later.<\/td> | <\/td><\/tr> |
| <desc><\/td> | Provides a text-only description for any SVG graphics element or container element.<\/td> | <\/td><\/tr> |
| <ellipse><\/td> | Specifies an ellipse.<\/td> | cx=”x-axis center of the ellipse” cy=”y-axis center of the ellipse” rx=”length of the ellipse’s radius along the x-axis”. Required. ry=”length of the ellipse’s radius along the y-axis”. Required. presentation attributes: Color, FillStroke, Graphics<\/td><\/tr> |
| <feBlend><\/td> | Blends two objects together.<\/td> | mode=”image blending modes normal|multiply|screen|darken|lighten” in=”identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>” in2=”the second input image to the blending operation”<\/td><\/tr> |
| <feColorMatrix><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feComposite><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feConvolveMatrix><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feDiffuseLighting><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feDisplacementMap><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feDistantLight><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feFlood><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feFuncA><\/td> | SVG filter. Sub-element to feComponentTransfer.<\/td> | <\/td><\/tr> |
| <feFuncB><\/td> | SVG filter. Sub-element to feComponentTransfer.<\/td> | <\/td><\/tr> |
| <feFuncG><\/td> | SVG filter. Sub-element to feComponentTransfer.<\/td> | <\/td><\/tr> |
| <feFuncR><\/td> | SVG filter. Sub-element to feComponentTransfer.<\/td> | <\/td><\/tr> |
| <feGaussianBlur><\/td> | SVG filter. Creates a Gaussian blur on the image.<\/td> | <\/td><\/tr> |
| <feImage><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feMerge><\/td> | SVG filter. Creates image layers.<\/td> | <\/td><\/tr> |
| <feMergeNode><\/td> | SVG filter. Sub-element to feMerge.<\/td> | <\/td><\/tr> |
| <feMorphology><\/td> | SVG filter. Performs a “thinning” or “fattening”.<\/td> | <\/td><\/tr> |
| <feOffset><\/td> | SVG filter. Offsets the input image.<\/td> | <\/td><\/tr> |
| <fePointLight><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feSpecularLighting><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feSpotLight><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feTile><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <feTurbulence><\/td> | SVG filter.<\/td> | <\/td><\/tr> |
| <filter><\/td> | Specifies a custom filter effect.<\/td> | <\/td><\/tr> |
| <font><\/td> | Specifies a font.<\/td> | <\/td><\/tr> |
| <font-face><\/td> | Describes a font\u2019s characteristics.<\/td> | <\/td><\/tr> |
| <font-face-format><\/td> | Specifies the font type referenced by its parent <font-face-uri>.<\/td> | <\/td><\/tr> |
| <font-face-name><\/td> | References a local font by name.<\/td> | <\/td><\/tr> |
| <font-face-src><\/td> | Corresponds to the src descriptor within\u00a0CSS @font-face\u00a0rules.<\/td> | <\/td><\/tr> |
| <font-face-uri><\/td> | Spesifies a remote definition of the current font<\/td> | <\/td><\/tr> |
| <foreignObject><\/td> | Allows user agents to offer graphical rendering features besides those defined within the specification.<\/td> | <\/td><\/tr> |
| <g><\/td> | Groups elements together.<\/td> | id=”name of the group” fill=”fill color for the group” opacity=”opacity for the group” presentation attributes: All<\/td><\/tr> |
| <glyph><\/td> | Specifies the graphics for a particular glyph.<\/td> | <\/td><\/tr> |
| <glyphRef><\/td> | Specifies a possible glyph to use.<\/td> | <\/td><\/tr> |
| <hkern><\/td> | Specifies kerning pairs and adjustment values in the horizontal advance value.<\/td> | <\/td><\/tr> |
| <image><\/td> | Specifies an image.<\/td> | x=”x-axis top-left corner of the image” y=”y-axis top-left corner of the image” width=”width of the image”. Required. height=” height of the image”. Required. xlink:href=”path to the image”. Required. presentation attributes: Color, Graphics, Images, Viewports<\/td><\/tr> |
| <line><\/td> | Specifies a line.<\/td> | x1=”x start point of the line” y1=”y start point of the line” x2=”x end point of the line” y2=”y end point of the line” presentation attributes: Color, FillStroke, Graphics, Markers<\/td><\/tr> |
| <linearGradient><\/td> | Specifies a linear gradient that fills the object by using a vector.<\/td> | id=”a unique id used to reference this pattern. Required to reference it” gradientUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. (Default ‘objectBoundingBox’)” gradientTransform=”the transformation to apply to the gradient” x1=”x start point of the gradient vector (number or % – 0% is default)” y1=”y start point of the gradient vector. (0% default)” x2=”x end point of the gradient vector. (100% default)” y2=”y end point of the gradient vector. (0% default)” spreadMethod=”‘pad’ or ‘reflect’ or ‘repeat'” xlink:href=”reference to another gradient attribute values of which are used as defaults and stops included. Recursive”<\/td><\/tr> |
| <marker><\/td> | Specifies the graphic that is to be used for drawing arrowheads. These elements can use the following marker attributes: “marker-start”, “marker-mid” and “marker-end”. Define the marker before referencing it via its URI.<\/td> | markerUnits=”‘strokeWidth’ or ‘userSpaceOnUse’. If ‘strokeWidth’ is used, one unit is equal to one stroke width. Otherwise, the marker will not scale and will use the same view units as the referencing element (default ‘strokeWidth’)” refx=”the position where the marker connects with the vertex (default 0)” refy=”the position where the marker connects with the vertex (default 0)” orient=”‘auto’ or an angle to always display the marker at. ‘auto’ will compute an angle making the x-axis a tangent of the vertex (default 0)” markerWidth=”width of the marker (default 3)” markerHeight=”height of the marker (default 3)” viewBox=”SVG viewport\u2019s bound for the current SVG fragment. 4 values are separated by white space or commas. (min x, min y, width, height)” presentation attributes: All<\/td><\/tr> |
| <mask><\/td> | Specifies an alpha mask, which is a combination of opacity values and clipping. Masking is a combination of opacity values and clipping. You can use text, shapes, or paths to define the mask sections. The default state of the mask is fully transparent. The graphics in a mask determine how opaque the mask portions are.<\/td> | maskUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. Specifies the coordinate system for x, y, height, and width on the <mask>. (default: ‘objectBoundingBox’)” maskContentUnits=”Specifies the coordinate system for the content of <mask>. ‘userSpaceOnUse’ or ‘objectBoundingBox’ (default: ‘userSpaceOnUse’)” x=”clipping plane of the mask (default: -10%)” y=”clipping plane of the mask (default: -10%)” width=”clipping plane of the mask (default: 120%)” height=”clipping plane of the mask (default: 120%)”<\/td><\/tr> |
| <metadata><\/td> | Specifies metadata.<\/td> | <\/td><\/tr> |
| <missing-glyph><\/td> | <\/td> | <\/td><\/tr> |
| <mpath><\/td> | References an external <path> element as a definition of a motion path.<\/td> | <\/td><\/tr> |
| <path><\/td> | Specifies a path.<\/td> | d=”a set of commands specifying the path” pathLength=”the total length for the path” transform=”a list of transformations” presentation attributes: Color, FillStroke, Graphics, Markers<\/td><\/tr> |
| <pattern><\/td> | Specifies a graphics object that can be redrawn at repeated coordinate intervals.<\/td> | id=”unique id used for referencing this pattern.” Required. patternUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. The second value makes units of x, y, height, width a fraction (or %) of the object bounding box that uses the pattern.” patternContentUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox'” patternTransform=”the whole pattern can be transformed” x=”pattern’s offset from the top-left corner (default 0)” y=”pattern’s offset from the top-left corner. (default 0)” width=”width of the pattern tile (default 100%)” height=”height of the pattern tile (default 100%)” viewBox=”the points “seen” in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)” xlink:href=”reference to another pattern attribute values of which are used as defaults and any children are inherited. Recursive”<\/td><\/tr> |
| <polygon><\/td> | Specifies a graphic containing at least three sides.<\/td> | points=”the points of the polygon. The total number of points sould be even”. Required. fill-rule=”part of the FillStroke presentation attributes” presentation attributes: Color, FillStroke, Graphics, Markers<\/td><\/tr> |
| <polyline><\/td> | Specifies any shape consisting of only straight lines.<\/td> | points=”the points on the polyline”. Required. presentation attributes: Color, FillStroke, Graphics, Markers<\/td><\/tr> |
| <radialGradient><\/td> | Specifies a radial gradient.<\/td> | gradientUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. (Default ‘objectBoundingBox’)” gradientTransform=”transformation to apply to the gradient” cx=”center point of the gradient (number or % – 50% is default)” cy=”center point of the gradient. (50% default)” r=”radius of the gradient. (50% default)” fx=”focus point of the gradient. (0% default)” fy=”focus point of the gradient. (0% default)” spreadMethod=”‘pad’ or ‘reflect’ or ‘repeat'” xlink:href=”Reference to another gradient attribute values of which are used as defaults and stops included. Recursive”<\/td><\/tr> |
| <rect><\/td> | Specifies a rectangle.<\/td> | x=”x-axis top-left corner of the rectangle” y=”y-axis top-left corner of the rectangle” rx=”x-axis radius (to round the element)” ry=”y-axis radius (to round the element)” width=”width of the rectangle”. Required. height=”height of the rectangle” Required. presentation attributes: Color, FillStroke, Graphics<\/td><\/tr> |
| <script><\/td> | Adds scripts to an SVG document.<\/td> | <\/td><\/tr> |
| <set><\/td> | Sets an attribute\u2019s value for a specified duration.<\/td> | <\/td><\/tr> |
| <stop><\/td> | Specifies a color and its position to use on a gradient.<\/td> | offset=”offset for this stop (0 to 1\/0% to 100%)”. Required. stop-color=”color of this stop” stop-opacity=”opacity of this stop (0 to 1)”<\/td><\/tr> |
| <style><\/td> | Allows style sheets to be embedded inside an SVG content.<\/td> | <\/td><\/tr> |
| <svg><\/td> | Creates a fragment of an SVG document.<\/td> | x=”top left corner when embedded (default 0)” y=”top left corner when embedded (default 0)” width=”width of the svg fragment (default 100%)” height=”height of the svg fragment (default 100%)” viewBox=”the points “seen” in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)” preserveAspectRatio=”‘none’ or any of the 9 combinations of ‘xVALYVAL’ where VAL is ‘min’, ‘mid’ or ‘max’. (default xMidYMid)” zoomAndPan=”‘magnify’ or ‘disable’. (default magnify)” xml=”outermost xmlns=”http:\/\/www.w3.org\/2000\/svg” xmlns:xlink=”http:\/\/www.w3.org\/1999\/xlink” xml:space=”preserve”” presentation attributes: All<\/td><\/tr> |
| <switch><\/td> | Allows displaying different shapes depending on the use of the language by the SVG viewer.<\/td> | <\/td><\/tr> |
| <symbol><\/td> | Specifies the reusable symbols.<\/td> | <\/td><\/tr> |
| <text><\/td> | Specifies a text.<\/td> | x=”a list of x-axis positions. The nth x-axis position is given to the nth character in the text. When there are additional characters after the positions run out they are placed after the last character. 0 is default” y=”a list of y-axis positions. (see x). 0 is default” dx=”a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)” dy=”a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)” rotate=”a list of rotations. The nth rotation is performed on the nth character.” textLength=”a target length for the text that the SVG viewer will try to display the text between by adjusting the spacing and\/or the glyphs. (default: The text’s normal length)” lengthAdjust=”tells the viewer what to adjust to accomplish rendering the text if the length is specified. The two values are ‘spacing’ and ‘spacingAndGlyphs'”< presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements<\/td><\/tr> |
| <textPath><\/td> | <\/td> | <\/td><\/tr> |
| <title><\/td> | Description for elements of SVG container element or graphics element.<\/td> | <\/td><\/tr> |
| <tref><\/td> | References a <text> element in the SVG document.<\/td> | Identical to the <text> element<\/td><\/tr> |
| <tspan><\/td> | Specifies a subtext within another <tspan> element or a <text> element.<\/td> | Identical to the <text> element and in addition: xlink:href=”Reference to a <text> element”<\/td><\/tr> |
| <use><\/td> | Uses a URI to reference a <svg>, <g>, or other graphical element with a unique id attribute and duplicate it.<\/td> | x=”x-axis top-left corner of the cloned element” y=”y-axis top-left corner of the cloned element” width=”width of the cloned element” height=”height of the cloned element” xlink:href=”URI reference to the cloned element” presentation attributes: All<\/td><\/tr> |
| <view><\/td> | This is a way to view the image<\/td> | <\/td><\/tr> |
| <vkern><\/td> | Specifies kerning pairs for vertically-oriented pairs of glyphs.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":" SVG drawings and images are created with different elements. Here, you can find a table of SVG elements with corresponding descriptions and attributes. SVG elements Element Description Attributes <a> Creates a link to other web pages, files, email addresses, locations on the same page, or any other URL. xlink:showxlink:actuatexlink:hreftarget <altGlyph> Controls the glyphs used to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[574],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9321"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9321"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9321\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} |