Tham dự Tech Lounge

Tham dự Tech Lounge


Thăng trầm của SVG: định dạng ảnh zoom cỡ nào cũng không sợ bể

Duy Luân
6/12/2015 13:46Phản hồi: 67
Thăng trầm của SVG: định dạng ảnh zoom cỡ nào cũng không sợ bể
SVG (Scalable Vector Graphics) là một định dạng ảnh vector dùng để thể hiện các đối tượng đồ họa hai chiều và có hỗ trợ tương tác từ phía người dùng cũng như ảnh động. Chuẩn SVG hiện đang được phát triển bởi Hiệp hội World Wide Web (W3C) từ năm 1999 đến nay, và chuẩn hóa lần đầu hồi năm 2001. Đặc điểm của SVG đó là hình ảnh được thể hiện ra dựa trên tọa độ của các vector cấu thành nên nó có thể thu lại nhỏ xíu hoặc bung ra thật to mà không làm ảnh hưởng đến chất lượng. Trong khi đó, ảnh PNG, JPEG, GIF là các ảnh bitmap cấu thành từ nhiều pixel tĩnh nên nếu phóng to ra thì sẽ bị bể hình. Trong bài viết này, mời các bạn xem sự phát triển của SVG từ đó đến giờ cũng như những ứng dụng thực tế của loại file này.

Mở đầu


Vào năm 1998, một cựu nhân viên Adobe ghé qua văn phòng của Elliot Geno, một chuyên viên thiết kế kĩ thuật số người Mỹ. Cựu nhân viên này nói rằng cô ấy có một thông tin sẽ làm cho Geno hứng thú: PGML, viết tắt cho "Precision Graphics Markup Language" và tạm dịch là: "Ngôn ngữ định hình đồ họa chính xác". Đây là cách mà Adobe dùng để gọi ngôn ngữ XML mà hãng dùng để cấu thành các file đồ họa vector. Và như nhiều chuyên gia khi đó, PGML xuất hiện để giải quyết một vấn đề của đồ họa chính xác trong cộng đồng web, thứ mà người ta có thể dễ dàng và sẵn sàng để đăng tải, kiểm soát cũng như tương tác với đối tượng đồ họa trên website.

Cùng lúc đó, bên cạnh PGML (chủ yếu từ Adobe) thì còn có một số chuẩn hình ảnh vector khác nữa xuất hiện trên thị trường, ví dụ như VML (của Microsoft) hay Web Schematics, Hyper Graphics Markup Language, WebCGM, DrawML. Tất cả những chuẩn này nhanh chóng được gộp lại thành một chuẩn duy nhất do Hiệp hội World Wide Web quản lý, đó chính là SVG. Điều này đảm bảo rằng mọi trang web có dùng SVG đều có thể hiển thị hình ảnh một cách chính xác nhất có thể, và vào thời điểm đó người ta cần đến Flash để hiện loại tập tin này ra web (lúc này Netscape Navigator 4.7 và IE 5 đang thịnh hành).

SVG là gì?


Điều gì làm cho đồ họa vector trở nên hấp dẫn đến mức rất nhiều công ty lớn trong ngành công nghệ cũng như hãng phần mềm thiết kế nhảy vào cùng phát triển? Bạn có thể tưởng tượng rằng trong đồ họa vector, mọi đường thẳng, đường cong, hình tròn, hình chữ nhật... đều được vẽ ra đều dựa vào các điểm tọa độ. Các điểm này sẽ được nối với nhau trong không gian hai chiều để tạo nên các hình ảnh thực sự. Bởi vì tọa độ này chỉ mang tính tương đối so với hệ trục tại thời điểm vẽ nên 1 đơn vị trong đồ họa vector có thể là 10 pixel, 20 pixel hay 100 pixel.

Ví dụ, nếu trong file vector có một đoạn định nghĩa XML như sau:

thì nó có nghĩa là hãy vẽ một hình tròn với tâm nằm ở tọa độ x = 60, y = 60, bán kính r = 50, tô màu đỏ. Còn đơn vị là bao nhiêu thì tùy, không quan trọng. 1pixel, 1cm, 1inch, 1 kilomet, sao cũng được. Tùy vào ý định của bạn đang muốn có tấm hình lớn đến cỡ nào mà thôi.

SVG_la_gi_thang_tram_dinh_dang_anh_vector_4.png

Trong khi đó, ở ảnh bitmap (còn gọi là ảnh raster) thông thường, 1 pixel là 1 pixel, bạn phóng to ra thì phần mềm sẽ phải dùng thuật toán nội suy để vẽ 1 pixel đó thành nhiều pixel khác nên ảnh bị bể ra là chuyện đương nhiên, kéo theo đó là chất lượng bị giảm đi rất nhiều. Phóng càng to thì tình trạng này càng nghiêm trọng hơn.

Cái tuyệt vời ở ảnh vector đó là bạn có thể tự mình ngồi viết ra những đoạn định nghĩa như trên bằng một trình soạn văn bản nào đó, Notepad chẳng hạn, rồi ném vào trình duyệt để xem kết quả. Bạn không nhất thiết phải xài tới một phần mềm vẽ ảnh nào đó để dựng nên các pixel, vốn là một công đoạn tính toán rất phức tạp. Khi mà nội dung của file SVG thực chất chỉ toàn là chữ nên nhà thiết kế có thể tìm kiếm thứ mình muốn rất dễ dàng và chỉnh sửa nó nhanh chóng.

MỘT FILE SVG MẪU Ở ĐÂY, MỜI BẠN CLICK VÀO XEM, VÀ HÃY THỬ PHÓNG TO TRÌNH DUYỆT ĐỂ XEM NÓ CÓ BỊ BỂ HAY KHÔNG.


Ảnh JPEG, PNG bình thường cũng chỉ là ảnh tĩnh, trong khi ở file SVG thì bạn có thể lập trình ra một số đoạn mã để điều khiển việc di chuyển của những đối tượng và tạo ra ảnh động. Và việc "động" trong ảnh SVG rất "minh bạch", người dùng có thể nhanh chóng hiểu và thấy được chuyển động đó chứ mọi thứ không bị giấu kín như là những giải pháp động khác trước thời HTML5 (ví dụ, Flash).

Quảng cáo


Chưa hết, SVG còn có thể được nén lại mà không lo mất dữ liệu (khi đó người ta gọi nó là SVGZ). Một file SVGZ có thể nhỏ hơn từ 30% đến 50% so với kích thước ban đầu, rất phù hợp để triển khai vào web nơi mà tốc độ tải là rất quan trọng và sự khác biệt sẽ tính bằng từng mili giây.

Hiện tại tất cả những trình duyệt nổi tiếng đều đã hỗ trợ SVG, ví dụ như Internet Explorer, Firefox, Chrome, Safari, Opera, cả trên di động lẫn trên máy tính. Người dùng không cần phải cài thêm bất kì phần mềm nào để thấy được file SVG cả. Thậm chí, ứng dụng Android cũng hỗ trợ hiển thị tập tin SVG trực tiếp luôn, không cần phải chỉnh sửa lại thành ảnh PNG.

SVG_la_gi_thang_tram_dinh_dang_anh_vector_1.png
Một bản vẽ kĩ thuật ở định dạng SVG (rất tiếc, mình không thể nhúng ảnh SVG vào đây cho các bạn xem vì diễn đàn chưa hỗ trợ nhúng loại file này).

Ngày nay, người ta ít dùng ảnh SVG để hiển thị đối tượng động vì đã có HTML5, chủ yếu SVG được xài để hiển thị logo công ty, các icon và những hình ảnh dạng mô phỏng trên các website. Một phần mềm vẽ vector cho phép xuất hình ảnh ra thành file SVG nổi tiếng là Adobe Illustrator. Tất nhiên là có thêm rất nhiều app khác nữa nhưng mình không kể ra hết ở đây.

Những năm 2000


Vào thời này, theo lời Elliot Geno, người ta đang cần một thứ hình ảnh có thể dễ dàng nhúng vào web, trong khi vẫn đảm bảo chất lượng cao trên mọi kích cỡ màn hình, mọi loại độ phân giải, và mọi mức zoom. SVG xuất hiện như một giải pháp rõ ràng và nó có thể giải quyết được tất cả những yêu cầu nói trên. Thế nhưng, lúc đó SVG lại cần đến Flash để hiển thị, thế nên mục tiêu của các công ty lớn đó là chuẩn hóa nó sao cho ảnh SVG được hỗ trợ mặc định bởi trình duyệt luôn. Với Geno, lý do mà SVG sẽ trở nên phổ biến đã quá rõ ràng.

Quảng cáo


Không lâu sau, Yahoo thành lập SVG Developers Group, một cộng đồng các nhà phát triển, nhà thiết kế làm việc với file SVG. Những cộng đồng tương tự dần dần được lập ra trên khắp thế giới, những phần mềm dùng để thiết kế file SVG ngày càng xuất hiện nhiều hơn để người dùng không còn phải tự mình viết các đoạn mã nữa.

Thế nhưng, SVG vẫn chưa nở rộ thật sự trong những năm 1999 và 2000. Đây cũng là điều dễ hiểu bởi vì SVG trong giai đoạn này vẫn đang được W3C phát triển mà thôi, cấu hình hoàn chỉnh chưa hề được công bố nên nghiễm nhiên các nhà phát triển web vẫn chưa dám triển khai định dạng mới này cho sản phẩm của mình với lo ngại về tính tương thích. Chủ yếu, việc đưa SVG vào web chỉ để thử nghiệm và nghịch ngợm là chính.

Tới năm 2001, cấu hình SVG 1.0 được chính thức phát hành bởi W3C.

2003: thời của các ngôn ngữ web

Trong khi SVG vẫn đang nằm ở những ngày đầu mới ra đời thì cộng đồng SVG đã có nhiều nỗ lực để quảng cáo cũng như hoàn thiện chuẩn này, cũng như khuyến khích việc sử dụng nó trong những phần mềm phù hợp. Trọng tâm của SVG lúc này là trình duyệt, tất nhiên rồi, nhưng bên cạnh đó các phần mềm máy tính để vẽ ra file SVG cũng vô cùng cần thiết nếu muốn chuẩn này trở nên phổ biến hơn trên thế giới. Nếu bạn bắt một nhà thiết kế ngồi viết ra những đoạn mã như một lập trình viên thì anh ta sẽ rất dễ chán nản, trong khi sức sáng tạo thì lại không được phát huy triệt để.

Thế là đến năm 2003, Adobe ra mắt phần mềm SVG Viewer để hiển thị file SVG trong trình duyệt, trong khi phần mềm vẽ nổi tiếng Illustrator thì cũng bắt đầu hỗ trợ cho định dạng này. Mozilla sau đó nhảy vào để tích hợp khả năng hiển thị SVG vào Firefox. Ngay cả Microsoft, vốn đã có một chuẩn riêng là VML, cũng cho phép người dùng xuất các sơ đồ mà họ vẽ trong phần mềm Microsoft Visio thành tập tin SVG. Ngày càng xuất hiện nhiều những màn trình diễn của SVG để cho mọi người thấy được sức mạnh của nó ra sao, thậm chí có người đã dùng SVG để vẽ ra bản đồ cũng như đồ thị dùng trong lĩnh vực mô hình hóa thông tin, hay tạo ra các website gần giống Flash.

SVG_la_gi_thang_tram_dinh_dang_anh_vector_3.png

Trong thời gian này cũng có nhiều quyền sách viết về SVG được xuất bản. Tác giải Chris Lilley đã hoàn thành cuốn sách "SVG cơ bản" của mình bằng một câu hết sức ấn tượng: Welcome to the Future, có nghĩa là chào mừng đến với tương lai.

Nhưng cái gì cũng có hai mặt. Adobe SVG Viewer, công cụ duy nhất để mở file SVG trong trình duyệt vào thời gian đó, không được phân phối rộng rãi. Microsoft thì vẫn chưa đưa SVG vào Internet Explorer 6 vốn đang sử dụng cực kì rộng rãi, thế nên nỗi lo của nhà phát triển web về tính tương thích vẫn còn. Và bởi vì không có sự hỗ trợ đến từ trình duyệt phổ biến nhất nên SVG vẫn bị mắc kẹt lại, nó chủ yếu dùng trong những môi trường chuyên nghiệp, những ứng dụng được kiểm soát chặt chẽ mà thôi. Thế giới web phổ thông vẫn vắng bóng SVG, thay vào đó người ta vẫn chuộng xài Macromedia Flash như là công cụ hiển thị hình ảnh vector.

Có 2 nhân tố chính của việc trì hõan việc hỗ trợ SVG:


1. Sự thống trị của IE và con đường của Microsoft


Vào những năm 2002 - 2003, Mozilla rất hứng thú với SVG và bỏ ra nhiều nỗ lực để đưa SVG vào Firefox một cách chính xác nhất có thể. Nỗ lực này tuy không đi nhanh nhưng ổn định, và khả năng hiển thị file SVG mà không cần plugin đã được trình diễn lần đầu tiên bởi chính Mozilla.

SVG_la_gi_thang_tram_dinh_dang_anh_vector_6.png

Cũng trong năm 2002, Microsoft liên hệ với Elliot Geno và muốn được thuê công ty của anh. Phản ứng ban đầu của Geno là rất ngạc nhiên, nhưng ngay sau đó mọi thứ trở nên dễ hiểu khi mà Microsoft đã biết về những sản phẩm SVG của anh. Microsoft theo dõi rất sát quá trình phát triển của SVG, nhưng ý định của hãng không phải là triển khai nó cho IE mà là để copy thành chuẩn riêng của họ. Về sau, Microsoft gọi nó là XAML, ngôn ngữ đứng sau công nghệ Silverlight từng cạnh tranh với Flash một thời nhưng bây giờ đã không còn phổ biến như hồi đó nữa.

Song song đó, Adobe thì đã đưa SVG vào rất nhiều sản phẩm đồ họa của công ty nhưng họ vẫn không cách nào làm cho Microsoft suy nghĩ lại. Với thị phần gần như tuyệt đối của IE lúc bấy giờ, Macromedia Flash là lựa chọn khả thi cho gần như mọi nhà phát triển web trong việc hiện hình ảnh vector. SVG có thể có nền tảng công nghệ tốt hơn, nhưng thị phần trình duyệt lại là thứ kiềm hãm nó. Microsoft không có lý do gì để mà chuyển đổi hướng đi của mình cả, vì hãng đang giữ thế độc quyền rồi.

2. Cuộc chiến của những tiêu chuẩn


Những năm 2000, Hiệp hội W3C hoạt động chưa thật sự hiệu quả. Họ ban hành nhiều tiêu chuẩn khác nhau, tuy nhiên nhiều cái lại chưa đủ tốt, một số thì chồng lấn lên nhau. SVG và HTML/CSS là một ví dụ, mặc dù bây giờ thì mục đích sử dụng của hai chuẩn này đã khác nhau (SVG để hiện hình ảnh, HTML và CSS để xây dựng trang web hoặc hiển thị chuyển động).

Lấy ví dụ, chuẩn SVG 1.0 chưa hỗ trợ flowing text, tức là văn bản sẽ tự nhảy xuống dòng khi được đặt trong một đối tượng cha nào đó. Nhóm SVG Working Group của W3C đã nhận nhiệm vụ giải quyết vấn đề này, nhưng rồi họ phát hiện ra nó không thuộc trách nhiệm của họ. Trong khi đó, CSS Working Group thì đã có chức năng nhảy dòng cho chuẩn CSS nhưng lại một lần nữa, nó cũng không thuộc trách nhiệm của họ.

SVG_la_gi_thang_tram_dinh_dang_anh_vector_7.png
Flowing text là như thế này

Năm 2004, nhóm Compound Document Format (CDF) Working Group được lập ra để quản nhiều chuẩn cùng lúc, trong đó có cả SVG, XHTML và nhiều thứ khác. Lúc này, HTML5 cũng bắt đầu ra đời và nó giống như là "đội quân kháng chiến" chống lại chuẩn XHTML (HTML + XML). HTML5 lại càng khiến cho mọi chuyện trở nên rối rắm hơn khi đưa ra chức năng Canvas, vốn cũng là một cách để vẽ hình ảnh. SVG bị trùng lặp với quá nhiều công nghệ khác và không ai thật sự đưa nó tiến về phía trước. Cuối cùng, nhóm CDF cũng đóng cửa và hầu hết công việc của họ sau này được chuyển thành chuẩn HTML5.

2005: Adobe từ bỏ SVG


Sau một thời gian dài chống chọi, Adobe cũng đã mệt mỏi khi SVG không được phổ biến. Năm 2005, Adobe tuyên bố mua lại Macromedia, đối thủ lớn nhất và duy nhất của công ty vào thời điểm đó. Chỉ một năm sau, phần mềm SVG Viewer đã không còn được tiếp tục phát triển, và tính năng liên quan đến SVG trong các phần mềm của Adobe dần dần bị gỡ bỏ.

Với sự "chống lưng" của Adobe về mặt kĩ thuật lẫn tài chính, Flash lại càng phổ biến hơn và nó có mặt ở khắp mọi nơi. Ngay cả những thiết bị di động cũng bắt đầu tìm cách đưa Flash lên trình duyệt, mặc dù đó chỉ là một bản Flash Lite gọn nhẹ hơn. Rõ ràng, Flash là con đường giúp Adobe thống trị thế giới, và hãng có thể làm điều đó một cách rất nhanh chóng, dễ dàng hơn so với việc xài SVG.

Về phần Microsoft, thay vì hỗ trợ cho SVG thì họ lại ra mắt Silverlight như một đối thủ của Flash. Internet Explorer vẫn chưa hề hỗ trợ cho SVG một chút xíu nào trong phiên bản 7 và 8.

SVG_la_gi_thang_tram_dinh_dang_anh_vector_2.png

Trong khi Adobe và Microsoft ra sức quảng bá cho chuẩn riêng của họ thì nhóm SVG Working Group, trong đó có những kẻ "thua cuộc" như Mozilla, vẫn tiếp tục làm việc để đưa công nghệ này ........ phía trước. Họ ra mắt cấu hình SVG 1.2 trong khi vẫn nỗ lực sửa lỗi và khắc phục hạn chế cho bản 1.1. Tháng 12 năm 2008, W3C ra mắt SVG 1.2 Tiny, trong khi SVG 1.1 Second Edition thì vẫn được duy trì (không có chức năng nào mới, chủ yếu chỉ sửa lỗi và làm rõ). SVG 2 cũng bắt đầu nhen nhóm như là một chuẩn mới có thể xài tốt với những ngôn ngữ web hiện đại như HTML, CSS, WOFF.

Dần dần, SVG đã được hỗ trợ bởi Firefox cũng như các trình duyệt WebKit (Chrome, Safari). Điều đó khiến cho IE dần trở thành một kẻ cô độc. Sự kiện này lại diễn ra trong bối cảnh thị phần IE sụt giảm nhanh nhờ vào sự hiện diện của Firefox và Chrome nên Silverlight dần đi vào thất bại.

Trên mảng desktop, Flash là một ông hoàng, với các video, game và quảng cáo Flash xuất hiện khắp mọi nơi. Adobe quảng bá Flash như là một giải pháp Internet để tạo ra những nội dung phong phú theo nhiều cách khác nhau. Tuy nhiên, trên mảng mobile thì Flash lại rất yếu kém. Tháng 9/2008, iPhone bắt đầu hỗ trợ SVG trong khi Flash thì chưa bao giờ được Apple cân nhắc mang lên trình duyệt này. Những trình duyệt của Android cũng đã bắt đầu đưa SVG vào.

2010: sự trỗi dậy của SVG


Tháng 1/2010, Microsoft tuyên bố hỗ trợ SVG trong Internet Explorer 9. Cuối năm đó, Steve Jobs chia sẻ suy nghĩ của mình về chuyện ông không ủng hộ Flash. Trong lúc đó, HTML5 ngày càng phổ biến hơn, được nhiều trình duyệt lớn hỗ trợ hơn, và lúc này SVG đã biến thành một phần của HTML5.

Với sức mạnh và độ phủ của mình, Apple có đủ quyền lực để "giết chết" Flash, một phần vì hãng lo ngại những công nghệ như Adobe AIR / Flash có thể khiến ứng dụng nền web làm tổn hại đến kho App Store của công ty, vốn đang là một nguồn thu béo bở. Lúc này, SVG chỉ ngồi đó chờ thời, và nhờ sự bùng nổ của smartphone và SVG đã dần dần lấy được vị thế đáng ra phải là của mình từ lâu.

Khi thấy được lợi ích của SVG, cả Microsoft và Apple bắt đầu hỗ trợ đầy đủ cho SVG. Năm 2011, Microsoft thậm chí còn tổ chức cả một hội nghị lớn về SVG. Đây là một điều vô cùng lạ lùng với một công ty như Microsoft. Về sau, Microsoft vẫn chưa ủng hộ cách thức tạo ra chuyển động cho file SVG và đến tận hôm nay vẫn thế, nhưng việc hiển thị SVG tĩnh thì đã hoàn chỉnh và được triển khai đầy đủ.

SVG_la_gi_thang_tram_dinh_dang_anh_vector_5.png

Các thư viện dùng để tạo và làm việc với file SVG ngày nay đã xuất hiện rất nhiều, trong số đó có nhiều công cụ được sử dụng phổ biến. SVG hiện tại cũng đã được hỗ trợ bởi khoảng 2 tỉ thiết bị trên toàn thế giới, trong khi Adobe thì mang tính năng SVG vào lại những phần mềm chuyên nghiệp của mình, như Illustrator hoặc Photoshop.

Giờ thì SVG đã có mặt ở mọi nơi và được các trình duyệt hỗ trợ sẵn, người ta không còn phải cài thêm bất kì phần mềm nào. Tuyệt vời hơn, SVG hoạt động tất với HTML5: từ Javascript, HTML, CSS, Canvas cho đến WebGL. Nói cách khác, SVG hiện đang tiến về một tương lai tươi sáng hơn với việc hỗ trợ ngày càng nhanh hơn, rộng hơn, tuyệt vời hơn. Về cơ bản thì SVG đang dần đạt được mục đích ban đầu của mình, chỉ là nó tốn nhiều thời gian và phải qua nhiều con đường thăm trầm hơn.

67 bình luận
Chia sẻ

Xu hướng

ANHLE479
TÍCH CỰC
8 năm
Ảnh này thì máy ảnh cần gì xoắn Megapixel nữa 😁
vitkon
CAO CẤP
8 năm
@baocongxuan Kiểu gì cũng bể, mà đã bể là hạt. Khi đã zoom 100% rồi zoom tiếp lên thì ảnh giời cũng vỡ.

Chẳng qua khi xem ảnh 4 Mpx, 12 Mpx trên màn hình (thực chất màn máy tính full-hd có ~ 2 Mpx hiển thị) thì cái 12Mpx nó lâu hiện 100% hơn so với thằng 4Mpx, nên cảm giác là chưa vỡ thôi.
@ANHLE479 Thời máy ảnh bắt được trường sáng mà tạo ra được điểm ảnh vecto còn xa lắm
@vitkon Đã là ảnh vector thì sao mà bể được bạn. Ví dụ bạn thử zoom 1 file PDF chỉ có text thông thường thì zoom bao nhiêu % chữ cũng luôn nét và mịn.
vitkon
CAO CẤP
8 năm
@baocongxuan 1. Bác nói đúng (vì em cũng nghĩ giống bác)
2. Bác đọc kĩ lại em với bác kia đang trao đổi cái gì (bác ý bảo ảnh phân giải cao thì ít vỡ, có vỡ cũng ít hạt =)) ). Ảnh vector không có độ phân giải (áp dụng khái niệm toạ độ mới đúng).
theanhnt
ĐẠI BÀNG
8 năm
Mới phải code một cái project cho bọn khách hàng Nhật về lập trình cái SVG này trên Android. Nói chung là nó thích hợp trong ngành công nghiệp của những bản vẽ thôi chứ trong nhiếp ảnh thì chẳng có ý nghĩa gì 😃
@theanhnt Cho bạn xem cái này:
http://www.o2c.de/en.html
duc5e
ĐẠI BÀNG
8 năm
JPG toàn bị lỗi, có cái định dạng này cũng hay. Bác nào cần Google Drive lưu ảnh, file ko giới hạn inbox mình nhé
_WIN_
ĐẠI BÀNG
8 năm
@duc5e làm thế nào vậy bạn? Mình mới phải xóa hơn 17G dữ liệu vì hết hạn miễn phí 15G/ năm 😔
tuhai944
TÍCH CỰC
8 năm
@duc5e Help em với. 😃 vụ lưu ảnh.
xuno1088
ĐẠI BÀNG
8 năm
@duc5e inbox sao bác
@duc5e bạn có cách nào Google Drive không giới hạn thế?
duc5e
ĐẠI BÀNG
8 năm
@Vitamin Hạinão Cần thì inbox mình
npdong1994
TÍCH CỰC
8 năm
Nhớ hồi mấy con Symbian s60 ngày xưa ơi là xưa toàn phải mò mấy cái SVG này để chỉnh icon các kiểu
Không biết có thể vẽ ảnh này trên phần mềm nào các bác nhỉ
@Nguyễn Minh Đức 24 Các phần mềm xử lý ảnh vector như Adobe Illustrator, Inkscape...
dqarena
ĐẠI BÀNG
8 năm
@Nguyễn Minh Đức 24 Vẽ từ Photoshop. Illustrator, Corel đều dc
@Nguyễn Minh Đức 24 corel AI autocad ... nhìu cái chính là định dạng này hiển thị ảnh dạng vector chứ để vẽ thì vô số
hoatongoc
TÍCH CỰC
8 năm
SVG rất rất khó để thể hiện hình ảnh thật bên ngoài cuộc sống, còn Raster image thì không thể đạt được độ nét trong khi vẫn giữ kích thước file nhỏ.
Mỗi cái có ưu nhược điểm riêng.
lmviet
ĐẠI BÀNG
8 năm
file svg trước dùng làm icon cho symbian 😃😃😃 1 thời vọc vạch tự nấu lại rom 😃😃😃
@lmviet Nhắc mới nhớ
kungfu9
CAO CẤP
8 năm
Và ẻm ấy chỉ phát triển trong mức giới hạn hẹp nhất định thôi
XBlue
CAO CẤP
8 năm
KO có SVG thì chẳng có định dạng nào cho file Vector trên web hiện tại
xem cho biết chứ không rành lắm
hongson890
TÍCH CỰC
8 năm
có coder nào sử dụng d3js ko 😁
Mình cực thích thư viện này.
biết đến cái này từ khá lâu rồi nếu ai làm pts phóng ảnh thì đều biết ảnh thông thường muốn phóng không vỡ sẽ phải chuyển sang chế độ vector bằng công cụ convert to smart object mà
@kakalotsupersaiya Bác đang bị nhầm bản chất 2 cái đó. Smart Object trong pts có nghĩa là nó giữ lại bản gốc của tập layers bác chọn lúc tạo object, khi bác co kéo biến hình thì nó render từ cái gốc đó ra. Còn vector là định dạng dựa trên các đường và điểm kèm theo các kiểu fill, opacity và blend options
Làm nhớ lại thời làm Symbian một thời cày SVG cũng biết chút chút,
Ưu SVG: vì nó vẽ bằng tập hợp những hình học cơ bản nên ko có hiện tượng vỡ hạt khi zoom
Nhược: là một loại lưu trữ dữ liệu có mất mát
Thể hiện tốt những ảnh đơn điệu, nhưng những ảnh phức tạp như ảnh ngoài thực tế thì rất tốn tài nguyên như dung lượng file ảnh và xử lý show ra thiết bị hiển thị
vitkon
CAO CẤP
8 năm
@lamquangminh ?? Sao lại là loại lưu dữ liệu có mất mát nhỉ??? Lệnh nào thì nó còn nguyên lệnh đấy, mất cái gì đâu??

Như thằng JPEG mới là nén mất dữ liệu chứ nhỉ, tỷ lệ nén càng cao, chất lượng hình càng giảm và file càng bé mừ 😔
@vitkon Để diễn tả một điểm ảnh hoặc một tập các điểm ảnh, người ta cần dùng nhiều tài nguyên hơn. Tài nguyên này lại quá dễ bị tác động (do tính mở và dễ chỉnh sửa) nên rất dễ bị mất mát dữ liệu.
vitkon
CAO CẤP
8 năm
@giacmocuoicung À, thế thì tại cách hiểu khái niệm về nén mất dữ liệu và nén không mất dữ liệu của bạn với mình khác nhau.

Theo mình hiểu thì nén không mất dữ liệu (Lossess) thì dữ liệu trước khi nén và dữ liệu sau khi giải mã giống nhau, không bị suy hao sau quá trình giải mã nén. Kiểu như file ZIP, RAR,... hoặc như bọn lưu ảnh RAW trên máy ảnh như TIFF, CR2 hoặc NEF gì gì đó (không biết dúng không).

Còn nén mất dữ liệu (lossy) thì dữ liệu trước khi nén và sau khi nén khác nhau qua quá trình mã hóa và giải mã. Kiểu như file JPEG, MP3,...

(Có thằng này giải thích này http://genk.vn/thu-thuat/tim-hieu-ve-file-nen-va-hai-kieu-nen-losslesslossy-2012103002253909.chn )

Còn việc "quá dễ bị tác động" thì lại là vấn đề khác. Sry bác.
@vitkon Ko phải đâu, SVG cũng tạm đc gọi là nén mất dữ liệu đó, nó cũng giống như JPEG, chọn chất lượng càng thấp là càng mất mát, chất lượng của SVG ở đây là số lượng polygon được suy ra từ một ảnh
Ví dụ, một ảnh SVG có 100 polygon có thể rút gọn lại còn 50 polygon
SVG hay HTML Canvas nói chung không chỉ hiển thị được ảnh tĩnh, mà còn là ảnh động (tác giả bài viết có nói ở trên).

Xin giới thiệu với các bạn coder hoặc còn làm flash một công cụ của Google chuyển đổi từ Flash sang ảnh động HTML Canvas (không cần bất cứ addon nào) tên Google Swiffy.

Một ví dụ của Swiffy: https://developers.google.com/swiffy/showcase/symphony-orchestra-ad
Wei Yan
ĐẠI BÀNG
8 năm
@nguyenhuedang SVG không chơi được ảnh động nhé bạn, canvas thì được, thực ra canvas không phải là ảnh chỉ là 1 vùng xử lý graphic bằng js thôi.
ussh999
TÍCH CỰC
8 năm
Khác gì DWG nhỉ?
minhlengoc
ĐẠI BÀNG
8 năm
@ussh999 DWG là của Autodesk độc quyền còn cái này là mã nguồn mở (theo mình nghĩ).
ussh999
TÍCH CỰC
8 năm
@minhlengoc Nhưng chỉ cần độ chi tiết như một ảnh macro của bông hồng thì file này chiếm 10G. Tự diễn biến 😁
haruku21
ĐẠI BÀNG
8 năm
noi về SVG thì nên hiểu qua một chút về bản chất của các định dạng ảnh, PNG, JPG, TIFF... đều thuộc loại ảnh Raster, nghĩa là được tạo nên từ các điểm ảnh, nên có bao nhiêu xài bấy nhiêu, cứ phóng to hơn kích thước tối đa của ảnh gốc là bị vỡ pixel dẫn đến bị mờ ảnh. Ngược với Raster là Vector - với các định dạng EPS, AI, CDR, SVG cũng có thể đc xếp vào thể loại ảnh Vector, Ảnh Vector đc tạo bởi các công thức toán học nên ko bị vỡ khi phóng to. Nhưng ngược lại nó lại ko thể hiện đc nhiều màu như Raster, nên Vector chỉ thích hợp với đồ hoạ hoạt hình hoặc những graphic ít màu.

Minh cũng đã từng ngâm cứu về SVG cách đây vài năm, do chuyên mảng web. Mà khách hàng lại yêu cầu cao về optimize dung lượng ảnh, đợt đó có thử convert ảnh sản phẩm từ JPG sang SVG nhưng fail hoàn toàn, vì file sau khi convert dung lượng rất lớn và ko thể hiện đc hết các màu mà hình ảnh gốc có. Hiện SVG đc sử dụng khá phổ biến cho ccc icon, Các Developer giỏi còn dùng SVG để làm Animation cũng khá phổ biến
không biết có liên quan không nhưng mình thấy khá giống những bản vẽ trong file pdf. zoom lên nhưng ko bị bể 😃
haruku21
ĐẠI BÀNG
8 năm
@thienquang07 nếu file PDF của bạn mà nhúng file ảnh thường như PNG, JPG ... thì zoom lên vẫn bể như thưởng thé, còn nều PDF mà nhúng file vector thì zoom to sẽ ko sao, nhưng bản chất thì PDF khác rất nhiều với SVG
Đọc trên xuống dưới, thấy hoa hết cả mắt ...Có rất nhiều người có thể k hề hiểu chữ "vector" nghĩa là gì ... mà vẫn comment như thường.

Xu hướng

Bài mới









  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2024 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02822460095
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019