svg

튜토리얼

mozilla SVG 튜토리얼

lib

svg.js

• 생성하고 controll, animation 할 수 있다

path

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

path 명렁어 설명

• M, L 등등

issue

Chrome not rendering SVG referenced via <img> tag

• <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="2" y="3" width="14" height="12" rx="1" stroke="white" stroke-width="2" />
  </svg>
  

• 윈도우 + chrome 86.0.4240.198 react 이 나오지 않는다 rx 를 2로 하면 나온다
• onload 후 css.width 를 넣으라 한다.

• 관련 stackoverflow

  if (jQuery(window).width() < 769) {
      jQuery('object#mysvg-logo')[0].addEventListener(
          'load',
          function () {
              jQuery('object#mysvg-logo').css('width', '181px')
          },
          true,
      )
  }
  

SVG doesn’t use font when inside HTML

img tag 를 사용하여 svg 를 불러온 경우 svg 안의 font 가 로드가 안 되는 현상

• stackoverflow

이유

보완상 svg 안에서 다른 파일을 로드 할 수 없다

해결 방법

font 파일을 base64 로 변환하여 svg 안에서 사용한다

@font-face {
    font-family: 'Roboto-Black';
    src: url("data:application/font-truetype;charset=utf-8;base64,..."); }

관련 글

SVG Filters 101

• SVG 필터에 대한 시리즈의 첫 번째 기사입니다. 이 가이드는 그것들이 무엇인지 이해하고 그것들을 사용하여 자신 만의 시각 효과를 만드는 방법을 보여줍니다.

HTML 컨텐츠에 SVG 효과 적용하기