Computer >> Máy Tính >  >> Lập trình >> HTML

Làm cách nào để sử dụng hình ảnh SVG trong HTML5?

Để sử dụng hình ảnh SVG trong HTML5, hãy sử dụng phần tử hoặc . Để thêm tệp SVG, bạn có thể sử dụng phần tử hoặc trong HTML. Chọn bất kỳ một trong số chúng theo yêu cầu của bạn.

Đây là cách bạn có thể thêm hình ảnh SVG. Nếu SVG được lưu dưới dạng tệp, nó có thể được sử dụng trực tiếp dưới dạng ảnh SVG:

Làm cách nào để sử dụng hình ảnh SVG trong HTML5?

Ví dụ

Bạn có thể thử chạy mã sau để sử dụng SVG Images 

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Image</title>
   </head>
   <body>
      <h2 align="center">HTML5 SVG Image</h2>
      <img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" alt="smile" height="100px" width="100px" />
   </body>
</html>