Căn giữa SVG HTML5 trên màn hình

SVG (Scalable Vector Graphics) là ngôn ngữ dựa trên XML để mô tả đồ họa vector 2D. Để căn giữa một phần tử SVG trên trang, bạn có thể dùng CSS.

Ví dụ SVG tròn đơn giản

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* Sửa từ -20% -> -50% để căn giữa chính xác */
      }
    </style>
    <meta charset="utf-8" />
  </head>
  <body>
    <h2>HTML5 SVG Circle</h2>
    <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
      <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
    </svg>
  </body>
</html>

Cách căn giữa đơn giản hơn (khuyên dùng)

Thay vì dùng position: relative; left: 50%; transform: translateX(-50%), hãy dùng:

#svgelem {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Cách này làm cho SVG trở thành block-level element và tự động căn giữa theo chiều ngang trong container cha. Kết hợp với width trên SVG hoặc container để kiểm soát kích thước.