Phối hợp giữa CSS và định dạng ảnh vector SVG

SVG là định dạng đồ họa vector có thể hiện thị trên giao diện web. Các trình duyệt hiện đại đều cho phép xử lý file SVG, điều thú vị ở đây là ta có thể sử dụng CSS để định kiểu cho các thành phần vector trong hình ảnh SVG.

Cách thông thường để đưa một hình ảnh SVG vào file html là sử dụng thẻ <img/> với thuộc tính "src" hoặc sử dụng css với thuộc tính "background:url()", ở đây mình sử dụng thẻ <img/>

<html>
	<head>
		<title>Phối hợp CSS và SVG</title>
	</head>
	<body>
		<img src="http://w3ateam.com/vi/hinhanh.svg"/>
	</body>
</html>

Trong đó, "hinhanh.svg" là file ảnh có định dạng SVG. Kết quả như sau:

Vì là hình ảnh vector nên bạn không cần quan tâm đến kích thước của hình ảnh, nó sẽ được hiển thị rõ nét dưới mọi kích thước mà bạn muốn, ví dụ thêm vào thẻ <img/> các thuộc tính "width", "height" để thay đổi kích thước hình.

<html>
	<head>
		<title>Phối hợp CSS và SVG</title>
	</head>
	<body>
		<img width="300px" height="120" src="http://w3ateam.com/vi/hinhanh.svg"/>
	</body>
</html>

Ta được kết quả như sau:

Ngoài phương pháp trên, ta còn có thể đưa định dạng SVG vào file HTML bằng cách copy/paste toàn bộ mã nguồn của file SVG

Để download file SVG trong bài viết (logo W3ATeam) click phải vào hình ảnh ở bên và lưu lại với tên mà bạn muốn ~~~>  . Bạn cũng có thể sử dụng bất kì file SVG nào tùy thích.

Để lấy được mã nguồn của file SVG, bạn mở file đó ra bằng một trình soạn thảo văn bản bất kì, mình dùng Notepad++ (Có thể download tại đây). Đây là hình ảnh mã nguồn của file SVG mình đã dùng làm ví dụ

Copy toàn bộ code nằm trong thẻ <svg></svg> (bao gồm cả thẻ đóng và mở) và paste thay thế toàn bộ thẻ <img/> trong file HTML:

<html>
	<head>
		<title>Phối hợp CSS và SVG</title>
	</head>
	<body>
		<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.450409in" height="0.183937in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
		viewBox="0 0 360 147"
		 xmlns:xlink="http://www.w3.org/1999/xlink">
		 <defs>
		  <style type="text/css">
		   <![CDATA[
			.fil2 {fill:#4B4B4D}
			.fil0 {fill:#5CC6D0}
			.fil1 {fill:#0098DA}
		   ]]>
		  </style>
		 </defs>
		 <g id="Layer_x0020_1">
		  <metadata id="CorelCorpID_0Corel-Layer"/>
		  <g id="_749677056">
		   <path class="fil0" d="M79 49l0 0 0 -7 26 0 0 7 0 0 0 45 0 0 0 0c0,15 12,27 26,27 15,0 26,-12 26,-27l0 0 0 0 0 -52 27 0 0 52 0 0c0,29 -24,53 -53,53 -15,0 -30,-7 -39,-18 -10,11 -24,18 -40,18 -29,0 -52,-24 -52,-53l0 0 0 -52 26 0 0 52 0 0 0 0c0,15 12,27 26,27 15,0 27,-12 27,-27l0 0 0 0 0 -45z"/>
		   <path class="fil1" d="M182 63l0 0 -6 0 0 21 6 0 0 0 36 0 0 0 0 0c12,0 21,9 21,21 0,12 -9,21 -21,21l0 0 0 0 -42 0 0 21 42 0 0 0c23,0 42,-19 42,-42 0,-13 -5,-24 -14,-32 9,-7 14,-18 14,-31 0,-23 -19,-42 -42,-42l0 0 -42 0 0 21 42 0 0 0 0 0c12,0 21,9 21,21 0,12 -9,21 -21,21l0 0 0 0 -36 0z"/>
		   <path class="fil2" d="M307 42c29,0 53,23 53,52l0 0 0 53 -26 0 0 -7c-8,4 -17,7 -27,7 -29,0 -52,-24 -52,-53 0,-29 23,-52 52,-52zm0 26c15,0 27,12 27,26 0,15 -12,27 -27,27 -14,0 -26,-12 -26,-27 0,-14 12,-26 26,-26z"/>
		  </g>
		 </g>
		</svg>
	</body>
</html>

Bạn có thể thấy code của định dạng SVG chứa các thẻ sau: <svg>, <path>, <g>. Mỗi thẻ đều có thể áp dụng các class riêng. Cụ thể là các thẻ <path> được gắn các class tương ứng "fil0, "fil1", "fil2", những class này được định kiểu bằng các thuộc tính css nằm trong thẻ <style> thuộc đoạn code của file SVG.

Và đây là điều tuyệt vời nhất, ta có thể xóa toàn bộ phần <style> này của SVG đi, sau đó liên kết file HTML này với một file CSS bên ngoài và viết cho nó các thuộc tính CSS tương ứng.

Đây là nội dung file HTML đã bỏ đi phần nội dung trong thẻ <style> sau đó liên kết với file style.css:

<html>
	<head>
		<link href="http://w3ateam.com/vi/style.css" type="text/css" rel="stylesheet"/>
		<title>Phối hợp CSS và SVG</title>
	</head>
	<body>
		<svg class="svgsize" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.450409in" height="0.183937in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
		viewBox="0 0 360 147"
		 xmlns:xlink="http://www.w3.org/1999/xlink">
		 <defs>
		 </defs>
		 <g id="Layer_x0020_1">
		  <metadata id="CorelCorpID_0Corel-Layer"/>
		  <g id="_749677056">
		   <path class="fil0" d="M79 49l0 0 0 -7 26 0 0 7 0 0 0 45 0 0 0 0c0,15 12,27 26,27 15,0 26,-12 26,-27l0 0 0 0 0 -52 27 0 0 52 0 0c0,29 -24,53 -53,53 -15,0 -30,-7 -39,-18 -10,11 -24,18 -40,18 -29,0 -52,-24 -52,-53l0 0 0 -52 26 0 0 52 0 0 0 0c0,15 12,27 26,27 15,0 27,-12 27,-27l0 0 0 0 0 -45z"/>
		   <path class="fil1" d="M182 63l0 0 -6 0 0 21 6 0 0 0 36 0 0 0 0 0c12,0 21,9 21,21 0,12 -9,21 -21,21l0 0 0 0 -42 0 0 21 42 0 0 0c23,0 42,-19 42,-42 0,-13 -5,-24 -14,-32 9,-7 14,-18 14,-31 0,-23 -19,-42 -42,-42l0 0 -42 0 0 21 42 0 0 0 0 0c12,0 21,9 21,21 0,12 -9,21 -21,21l0 0 0 0 -36 0z"/>
		   <path class="fil2" d="M307 42c29,0 53,23 53,52l0 0 0 53 -26 0 0 -7c-8,4 -17,7 -27,7 -29,0 -52,-24 -52,-53 0,-29 23,-52 52,-52zm0 26c15,0 27,12 27,26 0,15 -12,27 -27,27 -14,0 -26,-12 -26,-27 0,-14 12,-26 26,-26z"/>
		  </g>
		 </g>
		</svg>
	</body>
</html>

Còn đây là nội dung file CSS:

.svgsize{width:300px;}
.fil0{fill:red;}
.fil1{fill:green;}
.fil2{fill:blue;}

Ta dùng thuộc tính "fill" để thay đổi màu nền của 3 đối tượng vector (thẻ <path>) trong file SVG tương ứng với 3 chữ cái "w3a" thành Đỏ, Xanh lá, Xanh da trời, và dùng width để xác định lại kích thước hiển thị của hình vector bằng class "svgsize" đã được thêm vào thẻ <svg> trong file HTML.

Bạn cũng có thể áp dụng thêm nhiều thuộc tính CSS khác cho các thẻ nằm trong đoạn code file SVG tương tự như cách như trên. Phần còn lại bạn sẽ tự khám phá. Chúc thành công !