Thay đổi kích thước SVG trong html?

Vì vậy, tôi có tệp SVG bằng HTML và một trong những điều tôi đã nghe về định dạng là nó không nhận được tất cả pixel khi bạn phóng to nó.

Tôi biết với jpeg hoặc bất cứ thứ gì tôi có thể lưu trữ dưới dạng biểu tượng 50 x 50, sau đó thực sự hiển thị dưới dạng hình thu nhỏ (khá pixel) 100 (hoặc 10 x 10), bằng cách đặt thủ công chiều cao và chiều rộng trong image_src nhãn.

Tuy nhiên, các tệp SVG dường như được sử dụng với các thẻ đối tượng / nhúng và việc thay đổi chiều cao hoặc chiều rộng của THOSE chỉ dẫn đến không gian được phân bổ nhiều hơn cho hình ảnh.

Có cách nào để xác định rằng bạn muốn hình ảnh SVG được hiển thị nhỏ hơn hoặc lớn hơn hình ảnh thực sự được lưu trữ trong hệ thống tệp không?

Mở .svgtệp của bạn bằng trình soạn thảo văn bản (chỉ là XML) và tìm kiếm thứ gì đó như thế này ở trên cùng:

<svg ... width="50px" height="50px"...

Xóa các thuộc tính chiều rộng và chiều cao; mặc định là 100%, vì vậy nó sẽ kéo dài đến bất cứ thứ gì mà container cho phép.

Thử những thứ này xem:

1. Đặt hộp xem bị thiếu và điền vào các giá trị chiều cao và chiều rộng của các thuộc tính chiều cao và chiều cao đã đặt trong thẻ svg

2. Sau đó chia tỷ lệ hình ảnh đơn giản bằng cách đặt chiều cao và chiều rộng thành giá trị phần trăm mong muốn . Chúc may mắn.

3. Đặt tỷ lệ khung hình cố định với preserveAspectRatio="X200Y200 meet(ví dụ 200px), nhưng không cần thiết

ví dụ

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

bạn có thể thay đổi kích thước nó bằng cách hiển thị svg trong thẻ hình ảnh và kích thước thẻ hình ảnh tức là

<img width="200px" src="lion.svg"></img>

Thay đổi chiều rộng của container cũng sửa nó thay vì thay đổi chiều rộng và chiều cao của tệp nguồn.

.SvgImage img{ width:80%; }

Điều này khắc phục vấn đề của tôi về kích thước lại Svg. bạn có thể đưa ra bất kỳ% nào dựa trên yêu cầu của bạn.

Tôi đã tìm thấy tốt nhất để thêm viewBoxvà preserveAspectRatiocác thuộc tính cho các SVG của mình. Hộp xem phải mô tả toàn bộ chiều rộng và chiều cao của SVG dưới dạng 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

Sử dụng mã sau đây:

<g transform="scale(0.1)">
...
</g>

Dưới đây là một ví dụ về việc nhận giới hạn bằng cách sử dụng svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

Cuối cùng, bạn nhận được các số mà bạn có thể cắm vào svg để đặt khung nhìn chính xác. Sau đó sử dụng bất kỳ css nào trên div cha và bạn đã hoàn thành.

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

Tôi có tệp SVG trong HTML [....] IS có cách nào để chỉ định rằng bạn muốn hình ảnh SVG được hiển thị nhỏ hơn hoặc lớn hơn thực tế được lưu trữ trong hệ thống tệp không?

Đồ họa SVG, giống như các tác phẩm sáng tạo khác, được bảo vệ theo luật bản quyền ở hầu hết các quốc gia. Tùy thuộc vào thẩm quyền, giấy phép của tác phẩm hoặc bạn có phải là người giữ bản quyền hay không, bạn có thể không sửa đổi SVG mà không vi phạm luật bản quyền , tin hay không.

Nhưng luật pháp là những chủ đề phức tạp và đôi khi bạn chỉ muốn thực hiện shit. Do đó, bạn có thể điều chỉnh tỷ lệ của đồ họa mà không cần sửa đổi tác phẩm bằng cách sử dụng imgthẻ vớiwidth thuộc tính trong HTML của bạn.

Sử dụng yêu cầu HTTP bên ngoài để chỉ định kích thước:

<img width="96" src="/path/to/image.svg">

Chỉ định kích thước trong đánh dấu bằng URI dữ liệu :

<img width="96" src="data:image/svg+xml,...">

Các SVG có thể được tối ưu hóa cho URI dữ liệu để tạo hình ảnh SVG Favicon phù hợp với mọi kích thước:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">