Viewport

To control viewing portion for your vector graphics

• turned_in_notViewport Related Attributes
  • viewBox
  • preserveAspectRatio

viewBox

Used to specify which portion of your coordinates are visible within the specified width and height

• Elements using this attributes are: <svg> <symbol> <marker> <pattern> <view>

Syntax

viewBox="minX minY width height"

• label_outlineMore Detailed
  • minX, minY: The minX and minY coordinate of viewBox must be visible within the viewport region
  • width, height: The width and height from the (minX, minY) of viewBox must also be visible within the viewport region

In below example we fix the minX and minY to 0 and showing only the coordinates upto the width and height of viewBox
To position the viewBox you need the preserveAspectRatio attribute, described just below after this

library_books<svg height="100" width="100" viewBox="0 0 200 100">
  <circle cx="100" cy="50" r="40" 
          style="stroke:#fff399;fill:#ff1493;stroke-width:4"/>
</svg>

preserveAspectRatio

Used to specify how an element with different aspect ratio provided by viewBox must fit into a viewport, default value is 'xMidYMid meet'

• Elements using this attributes are: <svg> <symbol> <image> <feImage> <marker> <pattern> <view>
• viewBox attribute must required to see the affect of preserveAspectRatio (Not required only for<image> <feImage>)

Full-Syntax

library_bookspreserveAspectRatio="none"
preserveAspectRatio="xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax  meet|slice"

Syntax - When width > height

library_bookspreserveAspectRatio="none"
preserveAspectRatio="xMinY__|xMidY__|xMaxY__  meet"
preserveAspectRatio="x__YMin|x__YMid|x__YMax  slice"

Syntax - When width < height

library_bookspreserveAspectRatio="none"
preserveAspectRatio="xMinY__|xMidY__|xMaxY__  slice"
preserveAspectRatio="x__YMin|x__YMid|x__YMax  meet"

• label_outlineMore Detailed

  * Contains any combination of xMin, xMid, xMax, YMin, YMid, YMax
      Y__ means can be any from YMin, YMid, YMax, and
      x__ means can be any from xMin, xMid, xMax

  To position your viewBox within the viewport (the viewing portion of an element)

  • xMin: Align the minX of the element's viewBox with the smallest X value of the viewport
  • xMid: Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport
  • xMax: Align the minX + width of the element's viewBox with the maximum X value of the viewport
  • YMin: Align the minY of the element's viewBox with the smallest Y value of the viewport
  • YMid: Align the midpoint Y value of the element's viewBox with the midpoint Y value of the viewport
  • YMax: Align the minY + height of the element's viewBox with the maximum Y value of the viewport

  
  To render your viewBox elements

  • meet: (default) Align the element's according to its own viewBox coordinates, and the entire viewBox is visible within its viewport
  • slice: Align the element's according to its own viewBox coordinates, and the entire viewport is covered by its viewBox
  • none: Align the element's according to its own viewBox coordinates, and 100% viewBox is visible within 100% viewport, it will stretch the coordinates according to aspect-ratio

library_books<svg width="100" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMax meet">
  <circle cx="100" cy="50" r="40" 
          style="stroke:#fff399;fill:#ff1493;stroke-width:4"/>
</svg>