<image>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Phần tử SVG <image> bao gồm các ảnh bên trong tài liệu SVG. Nó có thể hiển thị các tệp ảnh raster hoặc các tệp SVG khác.

Các định dạng ảnh duy nhất mà phần mềm SVG phải hỗ trợ là JPEG, PNG và các tệp SVG khác. Hành vi của GIF động là không xác định.

Các tệp SVG được hiển thị bằng <image> được xử lý như một ảnh: tài nguyên bên ngoài không được tải, kiểu :visited không được áp dụng, và chúng không thể tương tác. Để đưa vào các phần tử SVG động, hãy thử <use> với một URL bên ngoài. Để đưa vào các tệp SVG và chạy script bên trong chúng, hãy thử <object> bên trong <foreignObject>.

Note: Tiêu chuẩn HTML định nghĩa <image> là một từ đồng nghĩa của <img> khi phân tích cú pháp HTML. Phần tử cụ thể này và hành vi của nó chỉ áp dụng bên trong tài liệu SVG hoặc SVG nội tuyến.

Ngữ cảnh sử dụng

CategoriesGraphics element, Graphics referencing element, Renderable element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements
<animate>, <animateMotion>, <animateTransform>, <script>, <set>, <style>

Thuộc tính

x

Định vị ảnh theo chiều ngang tính từ gốc tọa độ. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: 0; Có thể hoạt ảnh:

y

Định vị ảnh theo chiều dọc tính từ gốc tọa độ. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: 0; Có thể hoạt ảnh:

width

Chiều rộng mà ảnh được hiển thị. Không giống như <img> của HTML, thuộc tính này là bắt buộc. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: auto; Có thể hoạt ảnh:

height

Chiều cao mà ảnh được hiển thị. Không giống như <img> của HTML, thuộc tính này là bắt buộc. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: auto; Có thể hoạt ảnh:

href

Trỏ tới một URL cho tệp ảnh. Kiểu giá trị: <URL>; Giá trị mặc định: không có; Có thể hoạt ảnh: không

preserveAspectRatio

Điều khiển cách ảnh được co giãn. Kiểu giá trị: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; Giá trị mặc định: xMidYMid meet; Có thể hoạt ảnh:

crossorigin

Xác định giá trị của cờ thông tin xác thực cho các yêu cầu CORS. Kiểu giá trị: [ anonymous | use-credentials ]?; Giá trị mặc định: Không có; Có thể hoạt ảnh:

decoding

Cung cấp gợi ý cho trình duyệt về việc nên giải mã ảnh đồng bộ hay bất đồng bộ. Kiểu giá trị: async | sync | auto; Giá trị mặc định: auto; Có thể hoạt ảnh:

fetchpriority Experimental Non-standard

Cung cấp gợi ý về mức độ ưu tiên tương đối nên dùng khi tìm nạp một ảnh bên ngoài. Các giá trị cho phép:

high

Tìm nạp ảnh bên ngoài với mức ưu tiên cao hơn so với các tài nguyên bên ngoài khác.

low

Tìm nạp ảnh bên ngoài với mức ưu tiên thấp hơn so với các tài nguyên bên ngoài khác.

auto

Không đặt ưu tiên cho mức tìm nạp. Giá trị này được dùng nếu không đặt giá trị nào hoặc đặt giá trị không hợp lệ. Đây là giá trị mặc định.

xlink:href Deprecated

Trỏ tới một URL cho tệp ảnh. Kiểu giá trị: <URL>; Giá trị mặc định: không có; Có thể hoạt ảnh: không

Giao diện DOM

Phần tử này triển khai giao diện SVGImageElement.

Ví dụ

Hiển thị cơ bản một ảnh PNG trong SVG:

SVG

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>

Kết quả

Thông số kỹ thuật

Specification
Scalable Vector Graphics (SVG) 2
# ImageElement

Khả năng tương thích trình duyệt

Xem thêm