---

220420

---

HTML문서에 SVG 포함하는 법

---

svg 코드는 다음의 HTML요소를 사용해 문서에서 활용한다.

<img>
<embed>
<object>
<iframe>
<svg>

• img

<img src="jjang2.svg" alt="짱이 (내 동생)">

• embed

<embed src="jjang2.svg" type="image/svg+xml" aria-label="짱이 (내 동생)">

• object

<object data="jjang2.svg" type="image/svg+xml" aria-label="짱이 (내 동생)"></object>

• iframe

<iframe src="jjang2" aria-label="짱이 (내 동생)"></iframe>

• 인라인 SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- jjang2.svg 코드 -->
</svg>

• • 하지만 인라인 SVG 코드의 경우, 웹 브라우저에서 렌더링 하는데 다음 속성은 필요하지 않다. (version, xmlns, xmlns:xlink)

• SVG

<svg 
  version="1.1"
  xmlns=http://www.w3.org/2000/svg
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="520" height="520"
  viewBox="0 0 520 520">
  ...
</svg>

---

• prefix를 이용하여 공통 UI는 id로 묶어내고, 기타 레이아웃은 class처리한다.
• 큰 레이아웃은 전체를 Wrap으로 감싸고 Head, Content, Foot으로 구성한다.
• 이는 모바일도 해당된다.(layout name은 ###의 HTML 문서임을 알 수 있게하는 기능도 있다.
• Wrap을 relative로 하여 ###Mini###을 상단으로 위치하게 한다.
• 웹접근성용 바로가기(목차) 위치는 가장 상단에 위치한다.

• 회사에 대해 궁금한거 많이 준비하기
  어떤프로스세스 사용하는지 ?
  시리즈 B이상 투자받는 스타트업에 지원하기!
  width만 주고 height는 주지 않는다 자동으로 되게 자리잡게..?!