pelicinwebSVG
Introduction
ConceptsCoordinate SystemDefinitionsView BoxGroupingReusing Components
DrawingBasic ShapePathMarkerTextImage
AestheticsFill and StrokeGradientPatternClipping and MaskingTransformationFilter
OthersAnimationHyperlinksMetadata
pelicin › web › SVG

The coordinate system

In SVG coordinate system:

  • the point (0, 0) is at the top-left corner
  • the positive x direction is to the right
  • the positive y direction is to the bottom
The SVG coordinate system
The SVG coordinate system (Source: MDN)

References

  • Positions (MDN) — https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions
  • Top
  • References