SVG 이미지 대 SVG 소스 코드

SVG에 아이콘을 저장합니다 (품질 때문에). 나는 더 나은 어떤 방법을 알고 싶습니다 : 바로 SVG 이미지 대 SVG 소스 코드

때로는 복잡한 모양의 HTML <svg>... </svg>에 넣어

이미지 <img src="icon.svg">로

넣어 SVG를. 예 : Android 아이콘 :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40" viewBox="0 0 32 32"> 
<path d="M5,8.978c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2s2-0.896,2-2v-8C7,9.873,6.104,8.978,5,8.978z" fill="#85C808"/> 
<path d="M27,8.978c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2s2-0.896,2-2v-8C29,9.873,28.104,8.978,27,8.978z" fill="#85C808"/> 
<path d="M8,24.978h2v5c0,1.104,0.896,2,2,2s2-0.896,2-2v-5h4v5c0,1.104,0.896,2,2,2s2-0.896,2-2v-5h2v-15H8V24.978z" fill="#85C808"/> 
<path d="M20.723,2.53l1.027-1.779c0.139-0.24,0.057-0.545-0.184-0.684c-0.238-0.139-0.545-0.057-0.683,0.184 l-1.001,1.734C18.732,1.345,17.41,0.978,16,0.978c-1.409,0-2.731,0.367-3.882,1.008L11.116,0.25 c-0.139-0.239-0.443-0.321-0.684-0.183c-0.238,0.138-0.32,0.443-0.183,0.683l1.028,1.78C9.294,3.986,8,6.328,8,8.978h16 C24,6.328,22.706,3.986,20.723,2.53z M13,5.978c-0.553,0-1-0.447-1-1s0.447-1,1-1s1,0.447,1,1S13.553,5.978,13,5.978z M19,5.978 c-0.553,0-1-0.447-1-1s0.447-1,1-1s1,0.447,1,1S19.553,5.978,19,5.978z" fill="#85C808"/> 
</svg>

첫 번째 경우에는 http 요청 수를 줄였습니다. 두 번째 경우에는 브라우저가 상대적으로 복잡한 svg를 렌더링합니다. 또는 브라우저가 첫 번째 경우에 렌더링합니까? 아니면 브라우저가 다음 번에 캐시 할 수 있습니까?

아이디어가 있으십니까?

출처

2016-11-20 Daryn K.

브라우저는 항상 svg 마크 업을 렌더링하지만 다른 구성 요소는이를 수행해야합니까? 이미지 태그는 실제로 추가 요청을 의미하지만 실제로 캐시 할 수 있습니다. – arkascha

이미지가 복잡하면 일반적으로 CSS 스타일 시트를 포함하지 않는 것과 같은 방식으로 이미지를 포함하지 않는 것이 좋습니다. 이렇게하면 나중에 브라우저가 사용되도록 브라우저에서 이미지를 캐시 할 수 있습니다.

이미지가 매우 단순하다면 HTTP 요청 오버 헤드가 이미지를 다운로드하는 것보다 크기 때문에이를 포함 시키십시오.

출처

2016-11-20 14:01:33 glauxosdever

하지만 다른 한편으로는 추가 HTTP 요청을 의미합니다. – arkascha

복잡한 SVG 이미지가 포함 된 두 페이지를 방문한 경우 http 요청을 한 번 더 하시겠습니까? 아니면 이미지를 다시 다운로드 하시겠습니까? – glauxosdever

귀하의 진술에있는 것이 "if"입니다. 장점과 단점이 특정 상황에 완전히 의존하기 때문에 명확한 대답은이 질문에 불가능합니다. 그러나 당신은 명확하게 다음과 같은 진술을했습니다 : 그렇게하십시오. _Why? _ – arkascha

SVG 이미지 대 SVG 소스 코드

답변

관련 문제