Hướng dẫn SVG – Cách mã hóa hình ảnh với 7 ví dụ – cách tạo ảnh svg

Bạn đã bao giờ cần một biểu tượng cho trang web của mình, nhưng bạn không thể tìm thấy một biểu tượng phù hợp? Hoặc có lẽ bạn muốn có một sơ đồ đơn giản, nhưng không muốn tìm hiểu một thư viện hoàn toàn mới chỉ cho điều đó? Chà, tin tốt – bạn có thể làm tất cả những điều đó và hơn thế nữa

Bạn đang xem: cách tạo hình ảnh svg

Bạn đã bao giờ cần một biểu tượng cho trang web của mình chưa, nhưng bạn không thể tìm thấy đúng? Hoặc có lẽ bạn muốn có một sơ đồ đơn giản, nhưng không muốn tìm hiểu một thư viện hoàn toàn mới chỉ cho điều đó?

Chà, tin tốt lành – bạn có thể làm tất cả những điều đó và hơn thế nữa mà không cần rời khỏi trình soạn thảo mã yêu thích của mình hoặc sử dụng bất kỳ công cụ hoặc thư viện nào của bên thứ ba.

Vì HTML5, chúng tôi có thể bao gồm mã của hình ảnh SVG bên trong tài liệu HTML. Chúng tôi thậm chí không cần sử dụng thẻ hình ảnh đề cập đến một tệp riêng biệt. Chúng tôi có thể nội dòng mã của một hình ảnh ngay bên trong HTML. Chúng tôi có thể làm điều này vì SVG có cú pháp rất giống với HTML.

Điều này mở ra rất nhiều tùy chọn thú vị. Đột nhiên, chúng ta có thể truy cập các phần của hình ảnh từ JavaScript hoặc thiết lập kiểu từ CSS. Chúng tôi có thể tạo hiệu ứng cho các phần của hình ảnh từ JavaScript hoặc làm cho nó tương tác. Hoặc chúng ta có thể xoay chuyển tình thế và tạo đồ họa từ mã.

Đối với những hình ảnh phức tạp hơn, bạn vẫn sẽ sử dụng công cụ thiết kế. Nhưng lần tới khi bạn cần một biểu tượng, sơ đồ hoặc hoạt ảnh đơn giản, có thể bạn có thể tự viết mã cho nó.

Vậy SVG trông như thế nào dưới bề mặt? Trong hướng dẫn này, chúng ta xem qua mã nguồn của một số SVG để đề cập đến nền tảng.

( Xem bài viết này dưới dạng video với nhiều ví dụ thú vị hơn nữa.)

Thẻ SVG

Đầu tiên, chúng ta phải nói về chính thẻ svg . Thẻ này chứa các phần tử hình ảnh và xác định khung hình ảnh của chúng ta. Nó đặt kích thước bên trong và kích thước bên ngoài của hình ảnh.

Thuộc tính width height xác định dung lượng hình ảnh chiếm trong trình duyệt. Thường cũng có thuộc tính viewBox . Điều này xác định một hệ thống tọa độ cho các phần tử bên trong hình ảnh. Hai điều này có thể gây nhầm lẫn vì cả hai đều xác định một kích thước.

Bạn có thể coi width height của SVG là kích thước bên ngoài và viewBox là kích thước bên trong .

Kích thước được xác định bởi width height là cách phần còn lại của HTML nghĩ về hình ảnh và kích thước nó xuất hiện trong trình duyệt. Kích thước được xác định bởi viewBox là cách các phần tử hình ảnh nghĩ về hình ảnh khi chúng định vị bản thân bên trong nó.

Trong ví dụ tiếp theo, chúng ta có ba SVG có cùng nội dung . Phần tử hình tròn có cùng tọa độ tâm và cùng bán kính. Tuy nhiên, chúng có vẻ khá khác nhau.

Ở ví dụ ở giữa, kích thước được xác định bởi width height khớp với kích thước được xác định bởi hộp xem . Trong ví dụ đầu tiên, chúng ta thấy điều gì sẽ xảy ra nếu width height nhỏ hơn. Hình ảnh chỉ đơn giản là thu nhỏ lại khi tất cả các tọa độ và kích thước được xác định trong hình ảnh vẫn căn chỉnh với hộp xem .

Trong ví dụ cuối cùng, chúng ta thấy điều gì sẽ xảy ra nếu hộp xem chỉ tập trung vào một phần của hình ảnh. Mọi thứ có vẻ lớn hơn trong trường hợp này, nhưng kích thước thực của hình ảnh vẫn được xác định bởi thuộc tính width height .

viewBox cũng xác định tâm của hệ tọa độ, trong đó các mục hình ảnh tự đặt chúng.

Hai số đầu tiên xác định tọa độ nào nên nằm ở góc trên cùng bên trái của hình ảnh. Tọa độ phát triển sang phải và xuống dưới. Trong bài này, chúng ta sẽ căn giữa các hệ tọa độ. Tọa độ 0,0 sẽ luôn ở giữa hình ảnh.

Một lưu ý trước khi chúng ta bắt đầu. Mặc dù chúng tôi có thể nội dòng hình ảnh SVG trong tệp HTML, nhưng điều đó không có nghĩa là chúng tôi có thể tự do kết hợp bất kỳ thẻ SVG nào với bất kỳ thẻ HTML nào.

Thẻ SVG đại diện cho khung của hình ảnh và mọi phần tử SVG phải nằm trong thẻ SVG. Điều này cũng đúng ở chiều ngược lại. Thẻ HTML không được nằm trong thẻ SVG, vì vậy chúng tôi không thể có thẻ div hoặc thẻ tiêu đề bên trong SVG. Nhưng đừng lo lắng, có sẵn các thẻ tương tự.

Xem Thêm  Khai báo mảng Java - Cách khởi tạo một mảng trong Java với mã ví dụ - khai báo mảng trong java

Cách làm đồ trang trí Giáng sinh với SVG

Hãy bắt đầu với một món đồ trang trí cây thông Noel đơn giản. Ở đây chúng tôi sẽ chỉ sử dụng các hình dạng đơn giản. Một hình chữ nhật và hai hình tròn.

Chúng tôi sẽ định vị và tạo kiểu các phần tử này bằng các thuộc tính. Đối với hình tròn, chúng tôi xác định vị trí trung tâm và đối với hình chữ nhật, chúng tôi xác định góc trên cùng bên trái. Các vị trí này luôn liên quan đến hệ tọa độ được xác định bởi viewBox.

 & lt; html & gt;
  & lt; svg width = "200" height = "200" viewBox = "- 100 -100 200 200" & gt;
    & lt; circle cx = "0" cy = "20" r = "70" fill = "# D1495B" / & gt;

    & lt; vòng tròn
      cx = "0"
      cy = "- 75"
      r = "12"
      điền = "không có"
      đột quỵ = "# F79257"
      stroke-width = "2"
    / & gt;

    & lt; direct x = "- 17,5" y = "- 65" width = "35" height = "20" fill = "# F79257" / & gt;
  & lt; / svg & gt;
& lt; / html & gt;  

Hãy nhớ rằng, chúng tôi đã di chuyển tâm của hệ tọa độ vào giữa hình ảnh và trục X phát triển sang bên phải và trục Y phát triển về phía dưới .

Chúng tôi cũng có các thuộc tính trình bày để tạo kiểu cho hình dạng của chúng tôi. Không giống như trong HTML, chúng tôi không sử dụng background-color để đặt màu cho hình dạng mà chúng tôi sử dụng thuộc tính fill .

Và để thiết lập đường viền cho một hình dạng, chúng tôi sử dụng stroke stroke-width . Lưu ý cách chúng tôi sử dụng phần tử vòng tròn để vẽ một chiếc nhẫn và một quả bóng với các thuộc tính khác nhau.

Cách tạo một Giáng sinh Tree with SVG

Hãy chuyển sang cây thông Noel. Không phải lúc nào chúng ta cũng có thể sử dụng các hình dạng cơ bản để lắp ráp hình ảnh của mình. Đa giác là cách đơn giản nhất để vẽ một hình dạng tự do. Ở đây chúng tôi thiết lập một danh sách các điểm được kết nối với các đường thẳng.

  & lt; html & gt;
  & lt; svg width = "200" height = "200" viewBox = "- 100 -100 200 200" & gt;
    & lt; polygon points = "0,0 80,120 -80,120" fill = "# 234236" / & gt;
    & lt; polygon points = "0, -40 60,60 -60,60" fill = "# 0C5C4C" / & gt;
    & lt; polygon points = "0, -80 40,0 -40,0" fill = "# 38755B" / & gt;
    & lt; direct x = "- 20" y = "120" width = "40" height = "30" fill = "brown" / & gt;
  & lt; / svg & gt;
& lt; / html & gt;  

Bạn có thể tự hỏi làm thế nào chúng tôi biết trước khi bắt đầu viết mã tọa độ của chúng tôi ở đâu.

Thành thật mà nói, điều này đòi hỏi một chút trí tưởng tượng. Bạn có thể bắt đầu với giấy bút và vẽ bản nháp trước để ước tính. Hoặc bạn có thể phỏng đoán sau đó điều chỉnh các giá trị của mình cho đến khi nó có vẻ ổn.

Cách tạo hình bánh gừng bằng SVG

Hãy tiếp tục với hình bánh gừng. Vì SVG của chúng tôi hiện đang tồn tại bên trong tệp HTML, chúng tôi có thể gán các lớp CSS cho mỗi thẻ và di chuyển một số thuộc tính sang CSS.

Tuy nhiên, chúng tôi chỉ có thể di chuyển các thuộc tính bản trình bày. Thuộc tính vị trí và thuộc tính xác định hình dạng vẫn phải ở trong HTML. Nhưng chúng tôi có thể chuyển các thuộc tính màu sắc, nét vẽ và phông chữ sang CSS.

  & lt; svg class = "Gingerbread" width = "200" height = "200" viewBox = "- 100 -100 200 200" & gt;
  & lt; circle class = "body" cx = "0" cy = "- 50" r = "30" / & gt;

  & lt; circle class = "eye" cx = "- 12" cy = "- 55" r = "3" / & gt;
  & lt; circle class = "eye" cx = "12" cy = "- 55" r = "3" / & gt;
  & lt; direct class = "mouth" x = "- 10" y = "- 40" width = "20" height = "5" rx = "2" / & gt;

  & lt; line class = "limb" x1 = "- 40" y1 = "- 10" x2 = "40" y2 = "- 10" / & gt;
  & lt; line class = "limb" x1 = "- 25" y1 = "50" x2 = "0" y2 = "- 15" / & gt;
  & lt; line class = "limb" x1 = "25" y1 = "50" x2 = "0" y2 = "- 15" / & gt;

  & lt; circle class = "button" cx = "0" cy = "- 10" r = "5" / & gt;
  & lt; circle class = "button" cx = "0" cy = "10" r = "5" / & gt;
& lt; / svg & gt;  
 . bánh gừng .body {
  điền: # cd803d;
}

.gingerbread .eye {
  điền: trắng;
}

.gingerbread .mouth {
  điền: không có;
  nét: trắng;
  stroke-width: 2px;
}

.gingerbread .limb {
  đột quỵ: # cd803d;
  nét-rộng: 35px;
  stroke-linecap: tròn;
}  

Chúng ta đã thấy phần tô và một số thuộc tính nét vẽ, nhưng đây là một cái khác – stroke-linecap . Điều này có thể làm cho giới hạn dòng của chúng tôi tròn.

Lưu ý rằng ở đây chân và tay là những đường đơn giản. Nếu chúng ta loại bỏ dòng cap và đặt stroke-width nhỏ hơn, thì chúng ta có thể thấy rằng đây là những dòng đơn giản. Nhưng bằng cách thiết lập chiều rộng nét dày và nắp đường tròn, chúng ta có thể tạo hình chân và tay cho hình của mình.

Cũng lưu ý thuộc tính rx tại hình chữ nhật xác định miệng. Điều này sẽ làm cho các cạnh tròn. Bạn có thể coi nó là border-radius nếu muốn.

Xem Thêm  Cách căn giữa một hình ảnh trong HTML - căn chỉnh giữa hình ảnh html

Cách tạo dấu sao với SVG

Hãy chuyển sang một ngôi sao. Một ngôi sao là một hình dạng đơn giản, vì vậy chúng ta có thể xác định nó như một loạt các đa giác và đặt từng điểm riêng lẻ. Nhưng sau đó chúng ta cần biết từng tọa độ.

Thay vào đó, chúng ta có thể xác định một cánh là một nhóm, sau đó lặp lại nó năm lần với một vòng quay để có được hình dạng của ngôi sao. Chúng tôi sử dụng thuộc tính biến đổi để đặt xoay vòng.

 & lt; svg width = "200" height = "200" viewBox = "- 100 -100 200 200" & gt;
  & lt; g biến đổi = "dịch (0 5)" & gt;
    & lt; g & gt;
      & lt; polygon points = "0,0 36, -50 0, -100" fill = "# EDD8B7" / & gt;
      & lt; polygon points = "0,0 -36, -50 0, -100" fill = "# E5C39C" / & gt;
    & lt; / g & gt;
    & lt; g biến đổi = "xoay (72)" & gt;
      & lt; polygon points = "0,0 36, -50 0, -100" fill = "# EDD8B7" / & gt;
      & lt; polygon points = "0,0 -36, -50 0, -100" fill = "# E5C39C" / & gt;
    & lt; / g & gt;
    & lt; g biến đổi = "xoay (-72)" & gt;
      & lt; polygon points = "0,0 36, -50 0, -100" fill = "# EDD8B7" / & gt;
      & lt; polygon points = "0,0 -36, -50 0, -100" fill = "# E5C39C" / & gt;
    & lt; / g & gt;
    & lt; g biến đổi = "xoay (144)" & gt;
      & lt; polygon points = "0,0 36, -50 0, -100" fill = "# EDD8B7" / & gt;
      & lt; polygon points = "0,0 -36, -50 0, -100" fill = "# E5C39C" / & gt;
    & lt; / g & gt;
    & lt; g biến đổi = "xoay (-144)" & gt;
      & lt; polygon points = "0,0 36, -50 0, -100" fill = "# EDD8B7" / & gt;
      & lt; polygon points = "0,0 -36, -50 0, -100" fill = "# E5C39C" / & gt;
    & lt; / g & gt;
  & lt; / g & gt;
& lt; / svg & gt;  

Trong ví dụ này, mỗi cánh bao gồm hai đa giác. Chúng cần được xoay theo cùng một cách, vì vậy chúng tôi có thể nhóm chúng bằng thẻ g xoay chúng lại với nhau.

Bạn có thể coi thẻ g là thẻ div trong HTML. Tự nó, nó không đại diện cho bất cứ điều gì. Tuy nhiên, nó có thể chứa các phần tử khác và các thuộc tính được xác định trên thẻ nhóm áp dụng cho thẻ nhóm.

Có thể nhúng các nhóm. Với nhóm bên ngoài, chúng tôi dịch toàn bộ ngôi sao xuống dưới 5 đơn vị.

Cách tạo bông tuyết với SVG

Nhóm các phần tử là một mẹo hay, nhưng chúng tôi đã phải lặp lại cùng một mã cho mỗi cánh năm lần.

Thay vì lặp đi lặp lại cùng một đoạn mã, chúng ta cũng có thể tạo định nghĩa cho một hình dạng và sử dụng lại nó bằng id . Ở đây chúng tôi xác định một nhánh của bông tuyết sau đó sử dụng nó sáu lần với các cách xoay khác nhau.

  & lt; svg width = "200" height = "200" viewBox = " -100 -100 200 200 "& gt;
  & lt; defs & gt;
    & lt; đường dẫn
      id = "chi nhánh"
      d = "
        M 0 0 L 0 -90
        M 0 -20 L 20 -34
        M 0 -20 L -20 -34
        M 0 -40 L 20 -54
        M 0 -40 L -20 -54
        M 0 -60 L 20-74
        M 0 -60 L -20 -74 "
      đột quỵ = "# E5C39C"
      stroke-width = "5"
    / & gt;
  & lt; / defs & gt;

  & lt; sử dụng href = "# branch" / & gt;
  & lt; sử dụng href = "# nhánh" biến đổi = "xoay (60)" / & gt;
  & lt; sử dụng href = "# nhánh" biến đổi = "xoay (120)" / & gt;
  & lt; sử dụng href = "# nhánh" biến đổi = "xoay (180)" / & gt;
  & lt; sử dụng href = "# nhánh" biến đổi = "xoay (240)" / & gt;
  & lt; sử dụng href = "# nhánh" biến đổi = "xoay (300)" / & gt;
& lt; / svg & gt;  

Chi nhánh được định nghĩa là một đường dẫn . path là thẻ SVG mạnh nhất. Chúng tôi có thể xác định khá nhiều thứ bằng các đường dẫn và nếu bạn mở bất kỳ tệp SVG nào, bạn sẽ thấy hầu hết các đường dẫn.

Hình dạng của đường dẫn được xác định bởi thuộc tính d . Ở đây chúng tôi xác định một số lệnh vẽ. Một lệnh luôn bắt đầu bằng một chữ cái xác định loại lệnh và kết thúc bằng một tọa độ.

Ở đây chúng ta chỉ có hai lệnh đơn giản nhất, chuyển đến ( M ) và dòng tới ( L ). Lệnh di chuyển để di chuyển con trỏ đến một điểm mà không cần vẽ đường thẳng và lệnh line để vẽ một đường thẳng từ điểm trước đó.

Một lệnh luôn tiếp tục lệnh trước đó, vì vậy khi chúng ta vẽ một đoạn thẳng, chúng ta chỉ xác định điểm cuối. Điểm bắt đầu sẽ là điểm cuối của lệnh trước đó.

Đường dẫn này hơi bất thường vì có một số lệnh di chuyển trong đó để vẽ nhánh chính và mỗi nhánh phụ với cùng một đường dẫn.

Cách tạo cây cong bằng SVG

Phần tử đường dẫn trở nên thực sự mạnh mẽ khi chúng ta bắt đầu sử dụng các đường cong. Một trong số đó là đường cong Bézier bậc hai không chỉ xác định điểm cuối cho một đoạn mà còn có điểm điều khiển. Điểm điều khiển là một tọa độ vô hình mà đường thẳng đang uốn cong, nhưng không chạm vào nó.

  & lt; svg width = "200" height = "400" viewBox = "- 100-200 200 400" & gt;
  & lt; đường dẫn
    d = "
      M 0 -80
      Q 5 -75 0 -70
      Q -10-65 0-60
      Q 15 -55 0 -50
      Q -20 -45 0 -40
      Q 25 -35 0 -30
      Q -30-25 0 -20
      Q 35-15 0-10
      Q -40-5 0 0
      Q 45 5 0 10
      Q -50 15 0 20
      Q 55 25 0 30
      Q -60 35 0 40
      Q 65 45 0 50
      Q -70 55 0 60
      Q 75 65 0 70
      Q -80 75 0 80
      Q 85 85 0 90
      Q -90 95 0 100
      Q 95 105 0 110
      Q -100 115 0 120
      L 0 140
      L 20 140
      L -20 140 "
    điền = "không có"
    đột quỵ = "# 0C5C4C"
    stroke-width = "5"
  / & gt;
& lt; / svg & gt;  

Ở đây chúng ta có một loạt các đường cong Béziers bậc hai ( Q ) trong đó các điểm điều khiển càng ngày càng xa tâm của cây khi đường đi xuống.

Xem Thêm  Cách thêm Trình tải trước trong Trang HTML - cách tạo trình tải trước

Cách tạo chuông bằng SVG

Trong khi đường cong bezier bậc hai ( Q ) là tuyệt vời khi chúng ta muốn uốn cong một đường, thường thì nó không đủ linh hoạt.

Với Bezier khối ( C ), chúng ta không chỉ có một điểm điều khiển mà là hai. Điểm điều khiển đầu tiên thiết lập hướng ban đầu của đường cong và điểm thứ hai xác định hướng mà đường cong sẽ đến điểm cuối của nó.

Nếu các hướng này khớp với hướng của đường trước và đường sau đường cong, thì chúng ta có sự chuyển đổi suôn sẻ giữa các đoạn đường.

Ví dụ tiếp theo sử dụng cả bậc hai và bậc ba Béziers để tạo thành một chiếc chuông. Ở đây đáy của chiếc chuông này được xác định bằng các đường thẳng. Sau đó, một Béziers bậc hai bắt đầu chiếc áo choàng chuông. Tiếp theo, một Bezier khối tiếp tục một cách mượt mà bezier bậc hai khi nó tạo thành đỉnh của chuông. Sau đó, chúng tôi đến phần dưới cùng với một bezier bậc hai khác.

  & lt; svg width = "200" height = "200" viewBox = "- 100-100 200 200 "& gt;
  & lt; g stroke = "black" stroke-width = "2" & gt;
    & lt; circle cx = "0" cy = "- 45" r = "7" fill = "# 4F6D7A" / & gt;
    & lt; circle cx = "0" cy = "50" r = "10" fill = "# F79257" / & gt;
    & lt; đường dẫn
      d = "
        M -50 40
        L -50 50
        L 50 50
        L 50 40
        Q 40 40 40 10
        C 40 -60 -40 -60 -40 10
        Q -40 40-50 40 "
      điền = "# FDEA96"
    / & gt;
 & lt; / g & gt;
& lt; / svg & gt;  

Các bước tiếp theo – Tạo SVG tương tác với JavaScript

Dưới SVGs mui xe thoạt đầu có thể khá khó hiểu. Rất nhiều tọa độ, chữ cái và các thông số lạ. Tuy nhiên, một khi bạn hiểu nền tảng của chúng, bạn có thể sử dụng chúng để làm lợi thế của mình và bắt đầu mã hóa hình ảnh.

Và chúng tôi chỉ mới bắt đầu. Việc thêm JavaScript vào hỗn hợp sẽ giới thiệu một cấp độ hoàn toàn mới.

Trong bài viết tiếp theo, chúng tôi sẽ trình bày cách làm cho SVG tương tác với JavaScript. Nhưng nếu không thể chờ đợi, bạn có thể xem thêm một số ví dụ nâng cao trong hướng dẫn trên YouTube của tôi với 17 ví dụ khác về cách sử dụng SVG cho dự án tiếp theo của bạn!


Xem thêm những thông tin liên quan đến chủ đề cách tạo ảnh svg

Web Frontend – Bài 8: Iframe, Object, Embed, SVG

  • Tác giả: Cảnh Nguyễn Văn
  • Ngày đăng: 2020-04-12
  • Đánh giá: 4 ⭐ ( 4859 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khóa học lập trình Frontend cơ bản đến nâng cao.
    Khóa học không giới thiệu nhiều về lý thuyết mà tập trung vào thực hành HTML, CSS và JavaScript

Cách tạo file SVG từ PNG hoặc JPG trong photoshop dễ dàng

  • Tác giả: khotenmien.vn
  • Đánh giá: 4 ⭐ ( 5111 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: File SVG là tệp đồ họa dùng định dạng đồ họa vector hai chiều được tạo bởi World Wide Website Consortium (W3C). Nó mô tả hình ảnh….

Chuyển đổi JPG sang SVG (Trực tuyến miễn phí) — Convertio

  • Tác giả: convertio.co
  • Đánh giá: 4 ⭐ ( 4032 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tốt nhất để chuyển đổi file JPG sang SVG chỉ trong vài giây. 100% miễn phí, bảo mật, và dễ sử dụng! Convertio — công cụ trực tuyến cao cấp có thể giải quyết mọi vấn đề với bất kỳ loại file nào.

Tạo hình khối với SVG – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 4 ⭐ ( 8039 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này hướng dẫn cơ bản về SVG, giới thiệu một số kiến thức cơ bản để vẽ một hình khối SVG sử dụng…

Hướng dẫn tạo hiệu ứng ảnh động SVG một cách dễ dàng

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 8157 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng quan Việc tạo hiệu ứng trên trang web chưa bao giờ là đơn giản. SVG (Scalable Vector Graphics) sử dụng đánh dấu XML để giúp hiển thị tốt trên mọi kích thước màn hình. Nếu bạn download ảnh png hoặ…

Cách Tạo File Svg Trực Tuyến, Tạo File Svg Không Background

  • Tác giả: rmeilan.com.vn
  • Đánh giá: 4 ⭐ ( 7545 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chào bạn đọc! Sau quá trình mày mò lận đận mất khoảng 1 ngày về tìm hiểu cách sử dụng Logo đuôi , SVG thay cho ảnh

Cách tạo SVG từ PNG hoặc JPG trong Photoshop

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 9466 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, Quantrimang sẽ chỉ cho bạn cách chuyển hình ảnh PNG hoặc JPG thành SVG bằng Photoshop.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình