45
Tôi muốn biết làm cách nào để thực sự có thể sử dụng tệp .svg Trong một trang web?Cách sử dụng tệp .svg trong trang web?
A
Trả lời
5
http://www.w3schools.com/svg/svg_inhtml.asp
Ví dụ tốt nhất:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
2
Raphaël—JavaScript Library. Thư viện javascript đẹp đang sử dụng svg, và cung cấp cho bạn một loạt các hiệu ứng!
Cũng hỗ trợ hầu hết các trình duyệt, bao gồm IE
40
Xem svgweb quickstart và svgweb project homepage kiếm cái gì đó làm việc trong tất cả các trình duyệt bao gồm IE (yêu cầu plugin flash).
Có rất nhiều cách để bao gồm một file svg hiện:
<img src="your.svg"/><object data="your.svg"/><iframe src="your.svg"/><embed src="your.svg"/><div style="background:url(your.svg)">...</div>
+3
Yêu thích của tôi không có trong danh sách này, chỉ cần mở svg của bạn trong một trình soạn thảo văn bản và đưa nội dung của nó vào tài liệu html của bạn, điều này sẽ cho phép bạn áp dụng bộ lọc cho nó và tạo kiểu cho hình ảnh svg bằng css. – chrisweb
+2
@chrisweb Điều đó cũng hoạt động với '
+0
@chrisweb Làm thế nào mà làm việc với một hình nền? –
17
Nếu tất cả những gì bạn muốn làm là đặt một hình ảnh SVG như biểu trưng hoặc sơ đồ tĩnh, bạn chỉ cần cẩn thận để cung cấp dự phòng cho các phiên bản Internet Explorer cũ hơn (tức là phiên bản 8 trở về trước).
Phương pháp tốt nhất và đơn giản nhất mà tôi thấy là sử dụng tệp .png hoặc .jpg cho dự phòng của bạn, được đặt bằng thẻ img bình thường. Sau đó bạn bọc thẻ img trong thẻ đối tượng, sử dụng thuộc tính data để đặt SVG.
<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
<img src="/path-to/your-fallback-image.png" />
</object>
Dự phòng img chỉ được tải và sử dụng nếu trình duyệt không hiểu SVG.
+0
cách khác để di chuyển dự phòng vào chính CSS – Jerome
1
Tôi muốn đồng ý với câu trả lời từ "mã-zoop". Mặc dù kỹ thuật này không trả lời câu hỏi của bạn, nhưng nó cũng có thể là một giải pháp: nhập dữ liệu có liên quan trực tiếp vào HTML. Hoặc là trực tiếp như một yếu tố svg, hoặc bằng cách sử dụng Raphaël-JS.
Từ w3c-trường:
SVG là tất cả suported trong Trong Firefox, Internet Explorer 9, Google Chrome, Opera, và Safari, bạn có thể
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
(cuối quote)
Và để suy nghĩ nhiều hơn ngoài hộp, tùy thuộc vào cách bạn muốn sử dụng, bạn cũng có thể đặt đồ họa 1 màu của mình trong một webfont. (xem ví dụ iconmoon.io)
2
Tôi khuyên bạn nên đặt nội dung svg vào tài liệu của mình (kỹ thuật html5). Chỉ cần mở tập tin SVG của bạn, sao chép thẻ SVG và mọi thứ bên trong nó và sau đó dán nó vào tài liệu html của bạn.
<html>
<body>
<svg></svg>
</body>
</html>
Có lợi thế là điều này cho phép bạn sử dụng css để tạo kiểu, như thay đổi màu tô hoặc áp dụng bộ lọc cho nó như làm mờ. Một ưu điểm khác là bạn lưu một yêu cầu http để tìm nạp tệp svg nếu nó nằm bên trong tài liệu của bạn.
Nếu bạn muốn thay đổi vị trí của nó bằng cách sử dụng css, thì bạn phải đặt css bên trong thuộc tính kiểu. Các kiểu trong một tệp css bên ngoài sẽ không được áp dụng trong hầu hết các trình duyệt vì đây là một hạn chế bảo mật. Ví dụ:
<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>
Kỹ thuật này được hỗ trợ bởi tất cả các trình duyệt ngoại trừ trình duyệt IE8 và bên dưới cũng như trình duyệt Android 2.3 trở xuống.
Đọc SVG chương inline để biết thêm chi tiết:
Nếu bạn không muốn đặt nó inline trong trang của bạn sau đó thay thế tốt nhất có vẻ là đối tượng và tránh sử dụng thẻ nhúng.
đọc này để biết thêm chi tiết về đối tượng vs nhúng vs thẻ img:
+0
Bạn có biết cách tự động hóa điều này không? Thay vì sao chép từ tệp SVG và dán vào HTML của bạn, có plugin grunt hay thứ gì đó có thể đưa vào trang của bạn không? –
+0
nope xin lỗi không bao giờ nghe nói về một plugin như vậy, nhưng có lẽ nó tồn tại – chrisweb
2
cách tiếp cận Caspar là một trong những phù hợp. Tuy nhiên, tôi sẽ di chuyển dự phòng cho CSS, vì có thể bạn muốn áp dụng một số phong cách vào file svg chính nó ...
<object data="/path-to/your-svg-image.svg" type="image/svg+xml" class="logo"> </object>
CSS
.no-svg .logo {
width: 99px;
height: 99px;
background-image: url(/path-to/your-png-image.png);
}`
sẽ điều này thực sự hiển thị hình ảnh trên bất kỳ svg trình duyệt? Cảm ơn? – Parastar
Nó sẽ hiển thị trên tất cả các trình duyệt chính. –
Cảm ơn, nhưng whats 'pluginspage' là gì? không thể bắt kịp ứng dụng đó? – Parastar