Skip to content

Instantly share code, notes, and snippets.

@sofyansitorus
Last active September 18, 2023 02:14
Show Gist options
  • Save sofyansitorus/0f4bd0458255f6f8ac272e2e89fd925a to your computer and use it in GitHub Desktop.
Save sofyansitorus/0f4bd0458255f6f8ac272e2e89fd925a to your computer and use it in GitHub Desktop.

SVG (Scalable Vector Graphics) has a range of elements that you can use to create rich graphics directly within an HTML document or standalone SVG files. Below is a comprehensive list of SVG elements:

Structural Elements:

  1. <svg> - The root SVG container.
  2. <g> - Grouping element to group various shapes together.
  3. <defs> - Defines elements to be reused.
  4. <desc> - Description for its parent. For accessibility and metadata.
  5. <metadata> - Contains metadata about the SVG.
  6. <symbol> - Defines graphical template objects.
  7. <use> - Reuse graphical elements.

Shape Elements:

  1. <rect> - Draws a rectangle.
  2. <circle> - Draws a circle.
  3. <ellipse> - Draws an ellipse.
  4. <line> - Draws a line.
  5. <polyline> - Draws a polyline.
  6. <polygon> - Draws a polygon.
  7. <path> - Draws a path, which is a series of connected lines and curves.

Text Elements:

  1. <text> - Defines a text.
  2. <tspan> - Defines a span within a text.
  3. <tref> - References characters from another text element.
  4. <textPath> - Allows text to be placed along a path.
  5. <altGlyph> - Provides an alternative glyph.
  6. <altGlyphDef> - Defines the alternative glyphs.
  7. <altGlyphItem> - A candidate set of alternate glyphs.
  8. <glyphRef> - Defines a glyph reference.

Container Elements:

  1. <pattern> - Defines a pattern.
  2. <mask> - Defines a mask.
  3. <clipPath> - Clips graphical elements.

Filter Elements:

  1. <filter> - Defines filters.
  2. <feDistantLight> - Defines a distant light source.
  3. <fePointLight> - Defines a point light source.
  4. <feSpotLight> - Defines a spotlight source.
  5. <feBlend> - Blend mode.
  6. <feColorMatrix> - Color matrix adjustments.
  7. <feComponentTransfer> - Component-wise remapping of data.
  8. <feComposite> - Basic image compositing.
  9. <feConvolveMatrix> - Matrix convolution filter.
  10. <feDiffuseLighting> - Diffuse lighting effect.
  11. <feDisplacementMap> - Displacement map effect.
  12. <feDropShadow> - Drop shadow effect.
  13. <feFlood> - Fills the filter subregion.
  14. <feGaussianBlur> - Gaussian blur effect.
  15. <feImage> - Includes an image.
  16. <feMerge> - Merge filter results.
  17. <feMorphology> - Morphological operations.
  18. <feOffset> - Offset the input image.
  19. <feSpecularLighting> - Specular lighting effect.
  20. <feTile> - Fill a box by referencing a part of the source graphic.
  21. <feTurbulence> - Generates patterns like clouds or marble.

Gradient Elements:

  1. <linearGradient> - Linear gradient fill.
  2. <radialGradient> - Radial gradient fill.
  3. <stop> - Gradient stop color.

Animation Elements:

  1. <animate> - Generic animation element.
  2. <set> - Set a value over a duration.
  3. <animateMotion> - Move an object along a path.
  4. <animateTransform> - Animated transformation.
  5. <discard> - Removes elements at a certain time.

Descriptive Elements:

  1. <title> - Title for its parent. For accessibility and tooltips.

Other Elements:

  1. <switch> - Conditional processing.
  2. <foreignObject> - Allows for inclusion of a foreign namespace.

Font Elements:

  1. <font> - Font definition.
  2. <glyph> - Defines a single glyph.
  3. <missing-glyph> - Defines a missing glyph.
  4. <hkern> - Adjusts horizontal kerning.
  5. <vkern> - Adjusts vertical kerning.
  6. <font-face> - Describes the characteristics of a font.
  7. <font-face-src> - Points to a font definition.
  8. <font-face-uri> - Points to a remote definition.
  9. <font-face-format> - Describes the font's format.
  10. <font-face-name> - Assigns a name to the font.
  11. <font-face-view> - Creates a viewport for the font.

For the most up-to-date information about SVG elements, the official W3C SVG specification would be a good reference.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment