📌 SVG를 넣는 방법
1. <img>
<img src='images/love.svg' alt='svg-love' />
2. CSS Background
<style>
.svg {
width: 100px;
height: 100px;
background: url('images/love.svg') 0 0 no-repeat;
}
</style>
<body>
<div class='svg'></div>
</body>
3. SVG요소들을 직접 inline 삽입
4. <object>
<object data='images/love.svg' type='image/svg+xml'></object>
5. <embed> ❌
6. <iframe> ❌
📌 SVG 크기 설정
기본 설정
<svg width="500" height="500">
<rect x="0" y="0" width="500" height="500"></rect>
</svg>
[상대비율] viewBox : x좌표 y좌표 width비율 height비율
<svg width="500" height="500" viewBox="0 0 1000 1000">
<rect x="0" y="0" width="500" height="500"></rect>
</svg>
👉 svg : 500 x 500 크기 고정
👉 <rect> : viewBox의 값에 따라 상대크기로 적용 됨.
📌 SVG 압축
inline 코드 압축하기
svgom 검색 -> Paste markup 붙여넣기 -> copy -> html 붙이기
