웹 페이지에서 .svg 파일을 사용하는 방법은 무엇입니까?
웹 페이지에서 실제로 .svg 파일을 어떻게 사용할 수 있는지 알고 싶습니다.
IE를 포함한 모든 브라우저에서 작동 하는 항목에 대해서는 svgweb 빠른 시작 및 svgweb 프로젝트 홈페이지 를 참조하십시오 (플래시 플러그인 필요).
기존 svg 파일을 포함하는 방법에는 여러 가지가 있습니다.
<img src="your.svg"/><object data="your.svg"/><iframe src="your.svg"/><embed src="your.svg"/><div style="background:url(your.svg)">...</div>
로고나 정적 다이어그램과 같은 SVG 이미지를 배치하기 만하면됩니다. Internet Explorer의 이전 버전 (예 : 버전 8 이하)에 대한 폴백을 제공하도록주의해야합니다.
내가 찾은 가장 간단하고 가장 간단한 방법은 일반 img 태그를 사용하여 배치 된 대체에 .png 또는 .jpg를 사용하는 것입니다. 그런 다음 data 속성을 사용하여 SVG를 배치하여 개체 태그에 img 태그를 래핑합니다.
<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
<img src="/path-to/your-fallback-image.png" />
</object>
img 폴백은 브라우저가 SVG를 이해하지 못하는 경우에만로드되고 사용됩니다.
http://www.w3schools.com/svg/svg_inhtml.asp
가장 좋은 예 :
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
SVG를 문서에 인라인으로 넣는 것이 좋습니다 (html5 기술). SVG 파일을 열고 SVG 태그와 그 안의 모든 것을 복사 한 다음 html 문서에 붙여 넣으십시오.
<html>
<body>
<svg></svg>
</body>
</html>
이것은 채우기 색상을 변경하거나 블러와 같은 필터를 적용하는 것과 같이 CSS를 사용하여 스타일을 지정할 수 있다는 장점이 있습니다. 또 다른 장점은 SVG 파일이 문서 내부에있는 경우 가져 오기위한 http 요청을 하나 저장한다는 것입니다.
예를 들어 CSS를 사용하여 위치를 변경하려면 스타일 속성 내부에 CSS를 넣어야합니다. 외부 css 파일에있는 스타일은 보안 제한 사항이므로 대부분의 브라우저에서 적용되지 않습니다. 예를 들면 :
<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>
이 기술은 IE8 이하와 안드로이드 2.3 이하 브라우저를 제외한 모든 브라우저에서 지원됩니다.
자세한 내용은 인라인 SVG 장을 참조하십시오.
페이지에 인라인으로 배치하고 싶지 않다면 가장 좋은 대안은 object 태그 인 것 같습니다. embed 태그를 사용하지 마십시오.
object vs embed vs img 태그에 대한 자세한 내용은 다음을 읽으십시오.
Caspar의 접근 방식이 적절합니다. 그러나 SVG 파일 자체에 일부 스타일을 적용하고 싶기 때문에 대체를 CSS로 옮길 것입니다.
<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);
}`
Raphaël—JavaScript 라이브러리 . svg를 사용하고 있으며 다양한 효과를 제공하는 멋진 자바 스크립트 라이브러리!
또한 IE를 포함한 대부분의 브라우저를 지원합니다.
I'd like to agree with the answer from "code-zoop". Although this technically doesn't answer your question, it might also be a solution: enter the relevant data straight into the HTML. Either directly as an svg element, or by using Raphaël-JS.
From w3c-schools:
SVG is all suported in In Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari you can
<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>
(end of quote)
And to think even more outside the box, depending on how you want to use it, you can also put your 1-color graphics in a webfont. (see for example iconmoon.io )
ReferenceURL : https://stackoverflow.com/questions/2011289/how-to-use-svg-files-in-a-webpage
'IT박스' 카테고리의 다른 글
| 미래가 될 때까지 기다려 (0) | 2021.01.08 |
|---|---|
| jQuery 변경 이벤트 (0) | 2021.01.08 |
| Subversion : 트렁크에 병합되지 않은 모든 개정을 찾는 방법은 무엇입니까? (0) | 2021.01.08 |
| Ruby / Rails의 루프에서 매직 첫 번째와 마지막 표시기? (0) | 2021.01.08 |
| Facebook "좋아요"버튼 콜백 (0) | 2021.01.08 |