SVG <view> Element
Last Updated :
31 Mar, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <view> element is used to alter the attributes of viewbox of the original SVG element. It is used by referencing the element’s id as the target fragment of a URL. It provides features like zoom in or zoom out of the rendered content.
Syntax:
<view viewBox="" preserveAspectRatio="" viewTarget=""/>
Attributes:
- viewBox: It defines the coordinates which fits to the drawing region.
- preserveAspectRatio: It indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
- viewTarget: It consists of list of id values for the elements that are the main focus of the view.
Example 1:
<!DOCTYPE html>
< html >
< body >
< svg width = "400" height = "400"
viewBox = "0 0 100 100" >
< defs >
< radialGradient id = "gradient" >
< stop offset = "0%" stop-color = "green" />
< stop offset = "50%" stop-color = "lightgreen" />
< stop offset = "50%" stop-color = "green" />
</ radialGradient >
</ defs >
< rect x = "0" y = "0" width = "100%"
height = "100%" fill = "url(#gradient)"
style=" stroke: black;
fill: lightgreen;" />
< rect x = "15" y = "15" width = "70%"
height = "70%" fill = "url(#gradient)" />
< view id = "Normal" viewBox = "0 0 100 100" />
< view id = "HalfV" viewBox = "0 0 200 200" />
< view id = "Double" viewBox = "0 0 50 50" />
< a xlink:href = "#Double" >
< text x = "3" y = "6" font-size = "5" >
Double
</ text >
</ a >
< a xlink:href = "#Normal" >
< text x = "42" y = "6" font-size = "5" >
Normal
</ text >
</ a >
< a xlink:href = "#Half" >
< text x = "87" y = "6" font-size = "5" >
Half
</ text >
</ a >
</ svg >
</ body >
</ html >
|
Output:
Example 2: Meet keyword is used to fit the image within the view port.
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "100"
viewBox = "0 0 50 50"
preserveAspectRatio = "xMaxYMin meet"
style = "border: 1px solid black; fill:black;" >
< circle cx = "25" cy = "25" r = "24"
style = "stroke: #000000; fill:green;" />
</ svg >
</ body >
</ html >
|
Output:
Example 3:
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "100"
viewBox = "0 0 50 50"
preserveAspectRatio = "xMinYMin meet"
style="border: 1px solid black;
fill:black;">
< circle cx = "25" cy = "25" r = "24"
style="stroke: #000000;
fill:green;" />
</ svg >
</ body >
</ html >
|
Output:
Example 4: Slice keyword slices off any part of the image that does not fit inside the viewport.
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "100"
viewBox = "0 0 50 50"
preserveAspectRatio = "xMinYMin slice"
style="border: 1px solid black;
fill:black;">
< circle cx = "25" cy = "25" r = "24"
style="stroke: #000000;
fill:green;" />
</ svg >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...