SVG에있는 이미지의 여러 크기/버전

Question

ICO 파일과 비슷한 효과를 얻기 위해 SVG 파일에 여러 이미지를 포함시킬 수 있습니까?

ICO의 경우 파일에 여러 버전/이미지 크기가 포함되어 있으므로 크기가 작은 것은 세부 정보를 생략하거나 축소 비율 이미지를 더 읽기 쉽게 만들 수있는 사용 비율을 가질 수 있습니다.

---

편집

내가 어떤 특정 응용 프로그램에 관심이 아니에요, 내가 의도적으로 의도 무엇 ICO 형식을 고려하지 않는이 (예를 들어에만 사용).

(원래 크기/배급) 상기 논의

마녀 예로 들어 네 개의 다른 이미지를 포함하고, 사용을 Applications-database.svg 있습니다.

(축소)

축소 할 때 오른쪽의 그림은 훨씬 더 읽기 적은 정보를 포함하고 다른 비율을 가지고 있지만입니다

다음 Applications-database.svg가 자동으로 개별 사진 사이를 전환하지 않습니다 그러나

만 가장 큰 가장 세부적인 이미지가 정상적으로 보입니다.

그래서 질문은 : 수 있습니까 CSS/SVG 숨기기 /과는 다른 이미지를 보여 (아마 <symbol>) 전체 이미지 크기를 조정할 때 (즉 쇼 기호-1의 경우 폭> 50 다른 쇼 심볼이)?

Answer 1

SVG의 전체적인 점을 오해하는 것 같습니다.

SVG는 모양 정의와 관련하여 이미지를 정의합니다. 즉, 어떤 크기로 그려지고 최상의 결과를 얻을 수 있어야합니다 *.

픽셀 기반의 ICO 파일 또는 PNG와 같은 특정 크기에만 국한되지 않습니다.

* SVG가 헤더에 고정 크기를 지정하지 않는 한. 질문 편집

에 따라

업데이트는 다르게 최종 크기에 따라 SVG 스타일을 당신의 SVG에 @media 쿼리를 사용할 수 있습니다.

ellipse { 
 
    fill: lightsteelblue; 
 
    stroke: black; 
 
    stroke-width: 5; 
 
} 
 

 
@media all and (max-width: 400px) 
 
{ 
 
    ellipse { 
 
    stroke-width: 10; 
 
    } 
 
} 
 

 
@media all and (max-width: 100px) 
 
{ 
 
    ellipse { 
 
    fill: white; 
 
    } 
 
}

<svg viewBox="0 0 100 100"> 
 
    <ellipse cx="50" cy="75" rx="45" ry="20"/> 
 
    <ellipse cx="50" cy="50" rx="45" ry="20"/> 
 
    <ellipse cx="50" cy="25" rx="45" ry="20"/> 
 
</svg>

이 CodePen 열고 브라우저 창 크기를 조절하려고 : 미디어 쿼리가 모두 지원해야한다고/대부분의 브라우저를

https://codepen.io/PaulLeBeau/pen/WdEqye

이주의를, 그러나 그들은하지 않을 수 있습니다 다른 SVG 렌더러 또는 편집자가 지원할 수 있습니다.

Answer 2

는

물론 SVG 파일에 여러 개의 이미지를 삽입 할 수 있습니다.

질문은 이미지의 크거나 작은 크기를 사용해야하는지 SVG를 사용하여 무엇을 알 수 있는지입니다.

브라우저 용이라고 가정합니다. 레이어로 분할하십시오 (<g>). 매우 단순화 된 예제입니다.

<svg> 
    <g class="layer_large"> 
     large image 
    </g> 
    <g class="layer_small"> 
     small image 
    </g> 
</svg> 

필요에 따라 표시하거나 숨기려면 CSS 또는 jQuery를 사용하십시오.

물론 이것은 어떤 레이어를 사용할 지 결정해야합니다. Inkscape에이 SVG를로드하면 Inkscape는 두 개의 이미지를 표시합니다. SVG 표준 자체에서 렌더링되는 크기에 따라 SVG를 렌더링하는 방법을 지정하는 것에 대해서는 아무것도 알지 못합니다.