

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Align HTML5 SVG to the center of the screen
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.
Example
Let us see an example of SVG −
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg"> <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" /> </svg> </body> </html>
To center it, add the CSS like the following −
# svgelem { margin-left:auto; margin-right:auto; display:block; }
- Related Questions & Answers
- Positioning HTML5 SVG in the center of screen
- Align flex items in the center on different screen sizes in Bootstrap
- Align flex items at the center of the container with CSS
- How to center align the items of a JComboBox in Java?
- How to align views at the bottom of the screen in iOS
- How to align views at the bottom of the screen in Android?
- How to center a div on the screen using jQuery?
- How to center a window on the screen in Tkinter?
- Align single rows of items in the center with Bootstrap 4
- Align gathered items in the center in Bootstrap 4
- How to display a JFrame to the center of a screen in Java?
- What is the difference between SVG and HTML5 Canvas?
- Usage of CSS align-content property center value
- Usage of CSS align-items property center value
- Align a flex item in the center with Bootstrap 4
Advertisements