SVG란?

확장가능한 벡터그래픽을 말한다. XML파일형식의 마크업언어로 이루어진 이미지인데, css나 js로 수정가능한게 신기..
확장성도 있어 이미지를 확대해도 품질이 떨어지지않아 그것도 신기..
단점은 ie8에서 지원이 안된다고한다 ^^ 역시 ie!!

사용법

인라인(inline)

html상에 코드를 그대로 넣어주는 방법으로 이미지로드가 필요없다는 장점이 있음!! 단점은 html코드가 엄청엄청엄청!! 더러워짐!!! 신경쓰여 미칠거같아짐!!!

object

예시
//</object type="image/svg+xml" data="./potion.svg" class="nana"></object//>

type이 src가 아닌 data인걸 알수있음.
외부 css 기능을 사용할수없다는 단점이 있다.
svg파일 자체에 스타일을 박아야하는 신경쓰이는 일을 해야댐;;
기각

내가 사용하고싶은건 background로 쓰면서 외부 css기능을 사용할수 있는걸 하고싶음 있을거같음 겁나 검색해봄 ㅇㅇ

https://www.daleseo.com/css-svg-background/

SVG background로 사용하기

여러가지 방법을 찾아봤지만, svg의 최대장점인 fill값으로 배경색상을 조절하는 기능을 background로 사용하면 쓸수가없다!!!!
좋지 않은 방법으로 기각..

결론

가장 좋은 방법은 인라인태그로 SVG를 제어하는게 가장 좋은 방법이라고 한다. 속성을 자유자재로 변형할수 있기 때문..!!