Share Vẽ một vài hình ảnh SVG đơn giản

[filiallion]

Language

Tiếng Việt

Ở bài viết "Tìm hiểu về hình ảnh SVG" tôi đã giới thiệu tổng quan về hình ảnh SVG đang được sử dụng phổ biến trên web hiện nay. Bài viết này tôi sẽ hướng dẫn các bạn sử dụng XML để tạo ra một vài hình ảnh SVG đơn giản, giúp các bạn có kiến thức cơ bản nhất để có thể tự tạo bất kỳ biểu tượng nào phục vụ cho mục đích thiết kế website của các bạn.

Ví dụ đầu tiên tôi hướng dẫn cho các bạn đó là vẽ hình vuông với nội dung XML như sau:

<svg width="300" height="300">
    <rect x="50" y="20" width="150" height="150" style="fill: blue; stroke: pink; stroke-width: 5" />
</svg>

Từ ví dụ tạo hình vuông trên, các bạn sẽ có được hình chữ nhật bằng cách thay đổi thông số width như sau:

<svg width="450" height="300">
    <rect x="50" y="20" width="350" height="150" style="fill: blue; stroke: pink; stroke-width: 5" />
</svg>

Các bạn có thể vẽ hình tròn với ví dụ sau:

<svg width="300" height="300">
    <circle cx="50" cy="50" r="30" stroke="green" stroke-width="3" fill="blue" />
</svg>

Hay vẽ hình ellipse như ví dụ sau:

<svg width="500" height="140">
    <ellipse cx="200" cy="80" rx="100" ry="50" style="fill: blue; stroke: purple; stroke-width: 2" />
</svg>

Tất cả các ví dụ trên, các bạn lưu lại thành từng tập tin với phần mở rộng ".svg" và sử dụng các phần mềm xem hình ảnh SVG để xem.