SVG가있는 CSS : 실제 사용

<: :> SVG : CSS 로 스타일링과 조작에 대한 깊은 다이빙

SVG (Scalable Vector Graphics)는 웹 그래픽에 이상적인 가볍고 XML 기반 벡터 이미지 형식입니다. 탁월한 브라우저 호환성 (IE9 이후)과 함께 상호 작용 및 애니메이션에 대한 지원은 현대적인 웹 개발을위한 강력한 도구입니다. 이 기사는 CSS를 스타일과 스타일로 활용하고 SVG를 조작하여 웹 디자인의 다양성을 향상시킵니다.

SVG의 주요 장점

확장 성 :

래스터 이미지 (PNG, JPG, GIF)와 달리 SVGS는 모든 크기로 선명도를 유지하고 로고 및 아이콘에 적합합니다.

CSS 스타일링 :

CSS를 사용하여 DOM 내에서 SVG 요소를 직접 스타일링하고 조작하여 여러 SVG에 걸쳐 동적 상호 작용과 일관된 스타일을 가능하게합니다. SVG 스프라이트 : 여러 이미지를 단일 파일로 통합하여 HTTP 요청을 줄이고 캐싱을 개선하여 성능을 최적화합니다. 고급 기능 : 독립형 SVG 파일 내 애니메이션 및 상호 작용에 대한 지원은 간단한 그래픽을 넘어 응용 프로그램을 확장합니다.

SVGS가 비트 맵보다 우수한 이유

• 비트 맵 형식 픽셀별로 이미지 색상 픽셀을 정의합니다. 작은 이미지에는 수천 개의 픽셀이 필요하므로 압축 후에도 파일 크기가 커집니다. 비트 맵을 확대하면 픽셀레이션으로 이어집니다 벡터 기반 인 SVGS는 점, 선 및 곡선을 사용하여 이미지를 정의합니다. 이로 인해 파일 크기가 상당히 작고 탁월한 확장 성이 발생합니다. 예를 들어, SVG의 간단한 원은 훨씬 더 큰 동등한 PNG 또는 JPG에 비해 150 바이트 미만일 수 있습니다. 또한 SVG 배경은 본질적으로 투명합니다. XML 구조는 또한 접근성 및 SEO를 향상시킵니다 SVG 제작 도구 기본 SVG 드로잉을 이해하는 반면, 전문화 된 도구는 복잡한 모양 생성 및 코드를 생성하는 특수 도구를 단순화합니다.
Commercial :
• Adobe Illustrator, Affinity Designer, Sketch 오픈 소스 : 잉크 스케이프 온라인 (무료/상업) : Gravit Designer, Vect, SVG-Edit, Boxy SVG, Vecteezy 도서관 차트 :
JavaScript를 사용하여 데이터에서 SVG 차트를 생성합니다
• SVGO 및 SVGOMG와 같은 도구는 더 작은 파일 크기에 대해 생성 된 SVG 코드를 추가로 최적화 할 수 있습니다. 정적 이미지로 svgs를 사용합니다 내에서
• 그러나 그러나 SVG 내의 대화 형 요소는 비활성화됩니다. CSS 변환 및 필터를 적용 할 수 있으며 종종 비트 맵 스케일링에 우수한 결과를 얻습니다. CSS에서 인쇄 된 SVG 배경 CSS에서 직접 SVG를 인화하는 것은 배경 이미지가 작고 재사용 가능한 아이콘에 효율적이므로 추가 HTTP 요청을 피하십시오 :

  Postcss Assets 플러그인과 같은 도구는이 프로세스를 간소화합니다

  반응 형 SVG 이미지

  <code class="language-css">.myelement {
    background-image: url("mybackground.svg");
  }</code>

  반응 형 설계의 경우 크기 크기 문제를 방지하기 위해 기본 너비와 높이가

  태그 내에 정의되도록하십시오.

  그런 다음 CSS : 를 사용하십시오

  HTML 감염된 SVG 이미지 > SVG를 HTML에 직접 포함시켜 CSS 및 JavaScript 조작을 허용합니다. 그런 다음 CSS는 특정 SVG 요소를 대상으로 할 수 있습니다

  이것은 , 전환 및 애니메이션을 사용하여 동적 스타일을 허용합니다. SVG 스프라이트 : 효율적인 아이콘 관리

  요소를 사용하여 여러 아이콘을 단일 SVG 파일로 결합합니다. <svg></svg>

  html에서 아이콘을 참조하기 위해 요소를 사용하십시오

  <code class="language-css">.mysvgbackground {
    background: url('data:image/svg+xml;utf8,<svg viewbox="0 0 800 600" xmlns="https://www.w3.org/2000/svg"><circle cx="400" cy="300" fill="#ff0" r="50" stroke="#f00" stroke-width="5"></circle></svg>') center center no-repeat;
  }</code>

  이것은 성능을 향상 시키지만 크로스 브라우저 호환성과 효율적인 캐싱을 위해 신중한 처리가 필요합니다. Ajax 로딩 및 주입과 같은 기술은 이러한 과제를 해결할 수 있습니다.

  HTML 컨텐츠 (마스크, 클리핑, 필터)에 대한 SVG 효과

  <svg xmlns="https://www.w3.org/2000/svg" width="400" height="300"></svg>

  CSS , 및 특성을 활용하여 마스킹, 클리핑 및 시각적 필터와 같은 효과를 SVG 요소에 적용합니다. CSS 내에서 SVG 요소를 참조하면 복잡한 시각적 조작이 가능합니다. 내장 된 상호 작용이있는 독립형 SVG

  독립형 SVG 파일에는 CSS, JavaScript 및 비트 맵이 포함되어 자체 포함 대화 형 그래픽이 생성 될 수 있습니다. 이를 통해 외부 리소스에 의존하지 않고 대화식 컨텐츠를 배포 할 수 있습니다.

  결론

  <code class="language-css">img {
    display: block;
    max-width: 100%;
    height: auto;
  }</code>

  CSS와 결합 된 SVG는 웹 그래픽에 대한 강력하고 효율적인 접근 방식을 제공합니다. 다목적 성은 단순한 정적 이미지에서 복잡한 대화식 애니메이션으로 확장되어 웹 디자인을 향상시킬 수있는 수많은 가능성을 제공합니다.

위 내용은 SVG가있는 CSS : 실제 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!