Thực đơn
trang chủWindows 7

Cách tạo tệp SVG. Cách làm việc với SVG. Bạn cần biết gì trong thực tế? SVG là gì

Chúng tôi đã tìm ra loại hình ảnh nào và tệp nào, đồng thời phát hiện ra rằng nó được tạo cho video vẽ tay tập tin đặc biệt svg.

Rất khó để tìm thấy nó trên Internet vì nó được tạo ra ở một số chương trình nhất định và nó sẽ mở ra với chúng, và nó trông như thế này:



Tệp này, như tôi đã nói ở bài viết trước, được tạo cho các chương trình video vẽ tay. Với sự trợ giúp của nó, các video vẽ tay càng trở nên hấp dẫn hơn.

Tệp này cho phép bạn vừa vẽ có đường viền vừa vẽ không có đường viền.

Ví dụ: vẽ trong chương trình tập tin PNG và vẽ không có đường viền bằng tệp SVG:


Và trong ví dụ này, bạn sẽ thấy tệp trông như thế nào và được vẽ bằng cách sử dụng các đường viền. Tệp SVG được tạo bằng cách sử dụng rasterization vector trong chương trình Inscrabe,

Đừng phán xét quá khắt khe, vì đây chỉ là một bài kiểm tra. Trong chương trình này, bạn có thể tạo ra đồ họa đẹp hơn; đây là lần thử đầu tiên của tôi, nhưng tôi muốn bạn hiểu rằng hình ảnh raster luôn sáng hơn và nhiều màu sắc hơn.

Nó hoạt động tốt để rasterize hình ảnh với đường viền rõ ràng hơn thành đồ họa vector.

Để tạo những tệp này, có rất nhiều chương trình, trình soạn thảo đồ họa, cả trả phí và miễn phí. Có những cái di động không cần tải xuống ổ cứng, và cũng có những trang web trực tuyến

Một trang web sẽ giúp chuyển đổi sang bất kỳ tệp nào nhưng chỉ hoạt động ở chế độ đen trắng:

Quá trình tải xuống sẽ tự động bắt đầu nhưng phần mềm chống vi-rút của bạn có thể cho bạn biết rằng loại tệp này nguy hiểm cho máy tính của bạn. Phần mềm chống vi-rút của tôi phàn nàn về tất cả các tệp hiếm.

Trang web trực tuyến thứ hai mà tôi tìm thấy trên Internet

Trang web này phức tạp hơn một chút và hiển thị các tệp có màu. Trong trường hợp này, bạn có thể tự mình chọn số lượng màu. Và trên trang này, bạn cũng có thể tạo svg để tạo một bản vẽ không có đường viền. Tôi khuyên bạn nên tải trang web lên Google và dịch vì nó là tiếng Anh, nhưng bạn có thể tìm ra.

Tôi nghĩ mọi thứ đều rõ ràng với các trang web trực tuyến, hãy xem chúng ta có thể tìm thấy gì từ các chương trình.

Adobe Illustrator một trong những biên tập viên nổi tiếng và nổi tiếng nhất. Nó được trả tiền, nhưng không có gì là không thể, nó có thể được tìm thấy cả miễn phí và cả bằng tiếng Nga. Ngoài ra còn có vô số bài học và khóa học về cách làm việc với nó, cả miễn phí và trả phí.

Các tệp được tạo trong đó có chất lượng cao và hoạt động hoàn hảo với chương trình Giải thích.

Trong toàn bộ danh sách, chỉ Inscape là trình chỉnh sửa đồ họa miễn phí. Nó không phải là một sự tương tự tồi với một chương trình như Adobe Illustrator.

Tôi sẽ nói thật với bạn, tôi chưa từng thử làm việc với Corel.

Trong phép thuật Vector, bạn có thể chuyển đổi bất kỳ hình ảnh nào thành các tệp khác; nó giống một công cụ chuyển đổi hơn là một trình chỉnh sửa. Nhưng chưa đủ tệ.

Vậy là chúng ta đã làm quen với file SVG. Một ngôn ngữ mới chỉ xuất hiện vào đầu những năm 2000 nhưng đang tự tin bắt đầu chiếm lĩnh vị trí của mình trong giới phát triển và thiết kế web.

Tôi đang đợi bạn ở chỗ của tôi. Cho đến lần sau.

Kính gửi bạn Valentina Dudnichenko.

SVG là một định dạng hình ảnh dành cho đồ họa vector. Theo nghĩa đen, đây không gì khác hơn là đồ họa vector có thể mở rộng. Nghĩa là, đây chính xác là những gì bạn làm việc trong Adobe Illustrator. Sử dụng SVG trong phát triển web khá dễ dàng nhưng có một số tính năng đáng xem xét.

SVG dùng để làm gì?

  • Kích thước tệp nhỏ nén tốt
  • Chia tỷ lệ theo mọi kích thước mà không làm giảm chất lượng
  • Trông tuyệt vời trên màn hình retina
  • Kiểm soát thiết kế đầy đủ về tính tương tác và bộ lọc

Hãy vẽ một cái gì đó cho tác phẩm sắp tới trong Adobe Illustrator. Hãy lấy con chim Kiwi:

​

Xin lưu ý rằng khung vẽ được cắt chính xác dọc theo mép của bức tranh. Canvas SVG được xây dựng hoàn toàn giống với PNG hoặc JPG. Bạn có thể lưu tệp trực tiếp từ Adobe Illustrator dưới dạng tệp SVG.

​

Sau khi bạn lưu tệp, một hộp thoại khác sẽ xuất hiện với các tùy chọn SVG. Thành thật mà nói, tôi không biết nhiều về tất cả các cài đặt được trình bày trong cửa sổ này. Có một thông số kỹ thuật dành cho cấu hình SVG, vì vậy nếu quan tâm, bạn có thể đọc nó. Tôi thấy SVG 1.1 hoạt động rất tốt.

​

Điều thú vị ở đây là bạn có thể nhấp vào OK và lưu tệp hoặc nhấp vào nút “Mã SVG…” và trình soạn thảo văn bản sẽ mở ra bằng mã SVG.

​

Cả hai phương pháp đều có thể hữu ích.

Sử dụng SVG làm thẻ img

Trong Illustrator, khung vẽ của chúng tôi hóa ra là 612px ✕ 502px.

Kích thước hình ảnh trên trang là tùy thuộc vào bạn. Bạn có thể thay đổi kích thước hình ảnh bằng cách xác định thuộc tính chiều rộng và chiều cao, theo cách tương tự như với PNG hoặc JPG. Đây là một ví dụ:

Hãy kiểm tra chiếc bút này!

Cách tạo SVG đa trình duyệt

Khi sử dụng SVG theo cách này, bạn cần lưu ý: hỗ trợ khác nhau trình duyệt. Về cơ bản, SVG hoạt động ở mọi nơi ngoại trừ IE8 trở xuống, cũng như Android 2.3 trở xuống.

Nếu bạn cần sử dụng SVG nhưng cũng cần sự hỗ trợ từ các trình duyệt trên, có một số tùy chọn để giải quyết vấn đề. Tôi đã sử dụng một số kỹ thuật trong dự án khác nhauđể giải quyết vấn đề này.

Một cách để kiểm tra hỗ trợ SVG là Modernizr, bằng cách này bạn thay đổi đường dẫn src:

Nếu (!Modernizr.svg) ( $(".logo img").attr("src", "images/logo.png"); )

David Bushell đã nghĩ ra một cách rất dễ dàng thay đổi phương pháp nhưng nó chứa javascript trong phần đánh dấu:

Dịch vụ SVGeezy cũng có thể trợ giúp. Khi chúng ta tiếp tục bài viết này, chúng ta sẽ xem xét nhiều phương pháp dự phòng khác nhau để hỗ trợ SVG.

Sử dụng SVG làm hình nền

Bằng cách tương tự với thẻ img, SVG có thể được sử dụng như hình nền:

.logo ( display: block; thụt lề văn bản: -9999px; chiều rộng: 100px; chiều cao: 82px; nền: url(kiwi.svg); kích thước nền: 100px 82px; )

Lưu ý rằng chúng tôi đang đặt kích thước nền giống hệt với kích thước của phần tử. Điều này phải được thực hiện vì nếu không chúng ta sẽ thấy một phần nhỏ phần trên cùng ảnh gốc. Những con số này có tính đến tỷ lệ ban đầu của hình ảnh. Bạn cũng có thể sử dụng kích thước nền làm giá trị từ khóa, ví dụ chứa, để hình ảnh chiếm hoàn toàn toàn bộ phần tử.

Sử dụng SVG làm hình nền để lại dấu ấn trong việc hỗ trợ trình duyệt, nhưng nhìn chung, mọi thứ vẫn giống như khi sử dụng thẻ img.

Modernizr có thể giúp chúng tôi nhiều hơn ở đây cách hiệu quả hơn trong trường hợp của img. Vấn đề là nếu bạn thay thế hình nền bằng định dạng được hỗ trợ thì chỉ có một định dạng được thực thi Yêu cầu HTTP thay vì hai, như trường hợp của img. Modernizr thêm tên lớp “no-svg” vào Thẻ HTML nếu trình duyệt không hỗ trợ SVG:

Tiêu đề chính ( nền: url(logo.svg) không lặp lại trên cùng bên trái; kích thước nền: chứa; ) .no-svg .main-header ( hình nền: url(logo.png); )

Nếu bạn gặp khó khăn khi sử dụng hai cách sử dụng SVG trên, dưới đây là các cách khác để bố trí đồ họa vector.

Sử dụng SVG “nội tuyến”

Ở trên đã đề cập rằng khi lưu ảnh ở định dạng SVG, bằng trình chỉnh sửa Illustrator, bạn có thể lấy mã SVG chính xác (bạn cũng có thể mở tệp bằng cách sử dụng soạn thảo văn bản và sao chép mã này). Bạn có thể sao chép mã này vào HTML của mình và SVG sẽ hiển thị chính xác giống như sử dụng img.

Điều này có thể hữu ích vì hình ảnh đi kèm với mã trong tài liệu và không yêu cầu yêu cầu HTTP. Nói cách khác, lợi ích cũng giống như khi sử dụng Dữ liệu URI. Tuy nhiên, cũng có những nhược điểm. Do chèn chèn mã trực tiếp SVG, tài liệu này bắt đầu trông giống như một thứ rác rưởi cồng kềnh.

Ngoài ra còn có một tùy chọn để chèn SVG ở phía máy chủ:

Tối ưu hóa SVG

Adobe Illustrator không thực hiện các hành động tối ưu hóa theo mặc định trên hình ảnh SVG thu được. Nó cung cấp DOCTYPE và ghi chú, tất cả đều bằng nhìn chung rác. Theo mặc định, SVG có dung lượng khá nhẹ, nhưng tại sao không làm cho nó nhỏ hơn nữa? Peter Collingridge cung cấp công cụ trực tuyếnđể tối ưu hóa Trình tối ưu hóa SVG. Sử dụng dịch vụ này bạn có thể tải lên tập tin cũ và nhận được một cái mới được tối ưu hóa.

Nếu bạn muốn mạnh mẽ hơn - không vấn đề gì, đây là công cụ để tối ưu hóa SVG bằng công cụ Node JS phía máy chủ https://github.com/svg/svgo

Kiểu dáng SVG

Xem SVG giống với HTML như thế nào? Đó là bởi vì cả hai đều dữ liệu XML. Trong thiết kế của chúng tôi có hai yếu tố tạo thành nền tảng, đó là hình elip và đường dẫn. Chúng ta có thể dễ dàng chỉ định các lớp cho chúng thông qua mã HTML.

Bây giờ chúng ta có thể kiểm soát các thành phần này bằng CSS SVG tùy chỉnh. CSS này không cần phải được nhúng trực tiếp vào SVG, nó có thể được đặt hoàn toàn ở bất cứ đâu. Xin lưu ý rằng các phần tử SVG có bộ đặc biệt các kiểu được tạo riêng để làm việc với đồ họa vector. Ví dụ: không sử dụng màu nền thông thường mà sử dụng màu tô. Mặc dù một số kiểu thông thường cũng hoạt động, ví dụ: di chuột.

Kiwi ( điền: #94d31b; ) .kiwi:hover ( điền: #ace63c; )

SVG có các bộ lọc thú vị. Ví dụ làm mờ:

...

Sau đó bạn có thể áp dụng điều này trong css nếu cần:

Mặt đất: di chuột ( filter: url(#pictureFilter); )

Đây là những gì đã xảy ra:

Hãy kiểm tra chiếc bút này!

Hỗ trợ SVG “nội tuyến” trong trình duyệt

Danh sách các trình duyệt hỗ trợ chế độ này Màn hình SVG có thể được xem tại đây http://caniuse.com/#feat=svg-html5. Một lần nữa, không có hỗ trợ trong IE8 và Android 2.3.

Một trong các tùy chọn dự phòng cho loại SVG này:

...

Sau đó, chúng tôi sử dụng lại Modernizr:

Logo-fallback ( display: none; /* Đảm bảo nó có cùng kích thước với SVG chiếm */ ) .no-svg .logo-fallback ( Background-image: url(logo.png); )

Sử dụng SVG làm đối tượng

Nếu bạn không thích sử dụng SVG “nội tuyến” (hãy nhớ rằng tùy chọn này có nhược điểm, như thiếu bộ nhớ đệm), bạn có thể liên kết SVG với một đối tượng và sau đó thay đổi nó bằng css:

Để được hỗ trợ trên nhiều trình duyệt, chúng tôi sử dụng Modernizr:

Không có svg .logo ( width: 200px; high: 164px; hình nền: url(kiwi.png); )

Tùy chọn này hoạt động hiệu quả với bộ nhớ đệm và có trình duyệt hỗ trợ nhiều nhất trong số tất cả các tùy chọn trên. Nhưng để hành động với sử dụng CSSđối với một đối tượng như vậy, bạn sẽ phải viết kiểu trực tiếp vào tệp SVG.

...

Sử dụng dữ liệu URI là một cách để giảm trọng lượng của SVG. Mobilefish.com cung cấp một công cụ tối ưu hóa trực tuyến cho mục đích này. Chỉ cần dán nội dung tệp SVG của bạn và điền vào biểu mẫu, sau đó kết quả sẽ được hiển thị trong trường văn bản có thể được sao chép. Nó trông như thế này:

​

Bạn có thể sử dụng mã này ở bất cứ đâu! Ví dụ:

Biểu trưng ( nền: url(data:image/svg+xml;base64,); )

Và nhân tiện, nếu bạn có kiểu nội tuyến trong SVG trước base64, nó sẽ hoạt động nếu bạn sử dụng nó làm đối tượng!

Chuẩn bị SVG để sử dụng trên web là một quá trình rất đơn giản, không khó hơn xuất JPEG hoặc PNG. Sử dụng bất kỳ trình chỉnh sửa đồ họa nào bạn quen thuộc (Illustrator, Sketch, Inkscape [miễn phí], v.v. [hoặc thậm chí Photoshop nếu bạn đang sử dụng các lớp hình dạng]) ở kích thước hình ảnh bạn định sử dụng. Tôi thường làm việc trong Illustrator, vì vậy tôi sẽ giải thích một số cách chuẩn bị tệp trong chương trình đó, nhưng chúng thường áp dụng cho bất kỳ chương trình nào. Bạn có thể muốn chuyển đổi văn bản của mình thành các đường cong, vì phông chữ rất có thể sẽ hiển thị không chính xác, trừ khi bạn định tạo kiểu cho chúng bằng phông chữ web được sử dụng trên trang (điều này là có thể!). Bạn cũng không nên chuyển đổi tất cả các đối tượng thành các hình dạng đơn lẻ, đặc biệt nếu bạn có các nét cần thao tác trên trang, đặc biệt vì việc chuyển đổi các đối tượng thường không làm giảm kích thước tệp. Bất kỳ tên nào được gán cho nhóm hoặc lớp sẽ được thêm vào SVG dưới dạng ID phần tử. Điều này khá thuận tiện cho việc tạo kiểu nhưng sẽ làm tăng kích thước tổng thể tài liệu.

Trước khi xuất, bạn cần kiểm tra xem tất cả hình ảnh có nằm trong lưới pixel số nguyên hay không (nghĩa là không phải 23,3px × 86,8px). Nếu không, rất có thể hình ảnh sẽ không đủ rõ nét và một phần hình ảnh sẽ bị cắt bỏ. Trong Illustrator, điều này có thể được thực hiện như sau: Object > Artboards > Fit to Artwork Bounds. Sau đó nhấp vào lưu dưới dạng và chọn SVG và để cài đặt mặc định. Có một chút tối ưu hóa mà chúng tôi có thể thực hiện ở đây, nhưng nó thực sự không đáng giá vì chúng tôi sẽ sử dụng nhiều kỹ thuật nâng cao khác nhau sau này, vì vậy bây giờ chúng tôi sẽ không lãng phí thời gian cho những chỉnh sửa đó.

Thủ thuật để giảm kích thước tập tin.

(Xem tối ưu hóa)

Để đạt được kích thước nhỏ nhất SVG, sẽ hợp lý nếu loại bỏ mọi thứ không cần thiết khỏi nó. Nổi tiếng nhất và chương trình hữu ích(ít nhất là tôi nghĩ vậy) để xử lý SVG, đó là SVGO. Cô ấy loại bỏ tất cả mã yêu cầu. Nhưng! Hãy cẩn thận khi sử dụng chương trình này nếu bạn định thao tác SVG bằng CSS/JS, vì nó có thể làm sạch mã quá nhiều, gây khó khăn cho những thay đổi trong tương lai. Sự tiện lợi của SVGO còn là nó có thể được đưa vào quá trình lắp ráp tự động dự án, nhưng bạn cũng có thể sử dụng GUI nếu bạn muốn.

Hiểu chi tiết hơn với loại bỏ chính xác mọi thứ không cần thiết, chúng ta có thể làm việc khác trong biên tập đồ họa. Trước tiên, bạn cần đảm bảo rằng bạn sử dụng càng ít đường dẫn/hình dạng càng tốt, cũng như các điểm trên các đường dẫn đó. Bạn có thể kết hợp và đơn giản hóa mọi thứ có thể đơn giản hóa và xóa mọi thứ điểm không cần thiết. Illustrator có plugin VectorScribe với Công cụ Smart Remove Brush Tool sẽ giúp bạn loại bỏ các điểm trong khi vẫn giữ nguyên hình dạng tổng thể.

Tối ưu hóa sơ bộ

Smart Remove Brush Tool loại bỏ điểm

Tiếp theo chúng ta sẽ phóng to hình ảnh. Trong Illustrator, thật thuận tiện khi bật View > Pixel Preview với lưới pixel và kiểm tra xem các đường viền được định vị như thế nào. Sẽ mất một chút thời gian để đặt các đường viền trên lưới, nhưng nỗ lực sẽ được đền đáp và mang lại kết quả hiển thị rõ ràng hơn (tốt nhất là bạn nên chú ý đến điều này trước).

Điểm ngoài lưới

Căn chỉnh vào lưới

Nếu có hai hoặc nhiều đối tượng cần căn chỉnh thì nên loại bỏ tất cả các phần chồng chéo không cần thiết. Đôi khi, ngay cả khi các đường viền được căn chỉnh cẩn thận, vẫn có thể nhìn thấy một đường trắng mỏng. Để ngăn chặn điều này, bạn có thể chồng lên nhau một chút các đối tượng nơi chúng chồng lên nhau. Quan trọng: trong SVG chỉ số z là một trật tự nhất định, điều này phụ thuộc vào đối tượng bên dưới, vì vậy bạn nên đặt đối tượng trên cùng ở cuối tệp trong mã.

Và cuối cùng, điều cuối cùng nhưng không kém phần quan trọng, một điều thường bị lãng quên là bật tính năng nén gzip của SVG trên trang web của bạn trong tệp .htaccess.

AddType hình ảnh/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... v.v.

Để làm ví dụ về mức độ hiệu quả của kỹ thuật này, tôi sẽ lấy logo Breaking Borders ban đầu và tối ưu hóa nó theo cách này: tăng kích thước lên mức cần thiết; Tôi sẽ sắp xếp các đường nét theo thứ tự; Tôi sẽ xóa càng nhiều điểm càng tốt; di chuyển các điểm theo pixel nguyên; Tôi sẽ di chuyển tất cả các vùng chồng chéo và gửi tất cả đến SVGO.

Bản gốc: 1.413b

Sau khi tối ưu hóa: 409b

Kết quả là kích thước tệp trở nên nhỏ hơn ~71% (và nhỏ hơn ~83% khi được nén)

Hỗ trợ Đồ họa vectơ có thể mở rộng (SVG) hoạt động tốt ở tất cả các trình duyệt hiện đại, định dạng hình ảnh xuất hiện trong những bối cảnh đáng ngạc nhiên trên nhiều trang web khác nhau. Nhưng mặc dù đã trở thành tiêu chuẩn trong gần hai thập kỷ, SVG vẫn là một định dạng hơi mới đối với một số nhà thiết kế và nhà phát triển, khiến họ bối rối về cách sử dụng nó trên một trang web. Dưới đây là một số lý do tại sao bạn nên sử dụng SVG:

Kích thước tập tin nhỏ

Được thiết kế tốt, SVG thông thường nhỏ hơn nhiều so với PNG tương đương, nghĩa là các trang sử dụng chúng sẽ tải nhanh hơn cho người dùng.

Khả năng mở rộng

Vì SVG được xây dựng từ công thức toán học, thay vì các pixel cố định của đồ họa raster, Hình ảnh SVG có thể được tăng giảm kích thước mà không làm giảm chất lượng, khiến chúng trở nên lý tưởng cho các trang web hiện đại, đáp ứng.

Tương tác với DOM

SVG đôi khi được gọi là "bản vẽ đánh dấu": mọi thành phần trong hình ảnh SVG đều tương tác với DOM, nghĩa là CSS và JavaScript có thể thao tác các phần của tài liệu SVG. Không giống như đồ họa raster, mỗi hình dạng riêng lẻ trong SVG có thể có ID hoặc lớp riêng.

Dễ dàng sửa đổi và thích ứng

Chất lượng của các thành phần SVG có nghĩa là các tài liệu SVG được định dạng tốt có thể dễ dàng sửa đổi trong bất kỳ trình soạn thảo văn bản nào mà không cần chương trình chuyên ngành, cần thiết cho hình ảnh raster. Và vì SVG tương tác với DOM nên các thành phần của nó có thể được sửa đổi bằng CSS. Định dạng SVG hoàn hảo để hiển thị:

    logo

  • minh họa và hình vẽ

Công cụ làm việc với SVG

Mặc dù bạn có thể tạo tài liệu SVG bằng bất kỳ trình soạn thảo văn bản nào, nhưng các chương trình minh họa vector như Adobe Illustrator hoặc Inkscape thường lựa chọn tốt nhất(mặc dù cần lưu ý rằng các ứng dụng khác, bao gồm các chương trình 3D như Blender và ứng dụng máy chủ, có thể xuất SVG).

Dù bạn sử dụng cái gì, bạn cũng nên biết rằng tạo SVG của các ứng dụng đôi khi vẫn còn nhiều điều chưa được mong muốn: tài liệu thu được thường được mã hóa lại và đôi khi được định dạng kém. Tệp .svg có thể được làm nhỏ hơn, gọn hơn bằng cách xử lý tệp bằng trình tối ưu hóa như SVGOMG. Đôi khi việc chuyển sai document.svg qua trình xác nhận W3C có thể giúp bạn xác định vấn đề.

Tích hợp SVG

Có ba cách chính có thể sử dụng SVG trực tiếp trên trang web: