svg에 대해서 잘은 모른다. 그저 이미지를 html과 같은 웹에서 코드의 형태로 표현해주는 방식이고, 벡터 방식이라서 확대, 축소를 해도 픽셀이 보이지 않고 이미지가 깨지지 않는다는 장점이 있다는 것을 알고 있다. (이것도 정확한지는 모르겠다.)
svg를 활용하면 반응형 웹사이트를 만들 때 화면 크기에 따라 이미지를 따로 불러와도 되지 않아서 좋을 것 같았다. 또한 따로 이미지를 불러오는 것이 아니고 코드만 읽으면 되기 때문에 속도 측면에서도 더 좋을 것 같다.
하지만 간단한 이미지일때 그런 장점이 있다는 것이지, 이미지가 복잡해지면 용량도 커지고, 그러면 매 페이지마다 계속 해당 코드들을 불러와야 하기 때문에 트래픽을 많이 사용하게 될 위험도 있다.
아무튼 이 블로그의 왼쪽 상단에 로고와 그려닷컴이라는 텍스트가 바로 svg이다. 그냥 뜬금없이 한 번 적용해보고 싶어서 해봤는데 마음에 든다.
svg로 이미지를 제작하는 방법은 어도비 일러스트레이터를 이용하면 되는 것 같다. 그런데 난 그정도까지 활용할 일은 없을 것 같아서 일반 이미지를 svg파일로 변환해주는 사이트를 이용했다. 그 후기, 장단점을 적어보려고 한다.
테스트용으로 만든 예제 이미지
convertio.co
1.18kb
예제 파일을 올려보니 그라데이션이나 색은 다 사라지고 검은색과 흰색으로만 변환이 돼서 실망스러웠다.
하지만 단일 색으로 된 이미지는 가장 깔끔하게 변환해준다. (검은색으로만 이루어진 이미지를 변환해보면 이 사이트가 가장 깔끔하고 용량도 작다.)
이 블로그 좌측 상단의 로고와 그려닷컴이라는 글씨도 이 사이트에서 변환해서 사용한 것이다. 장단점이 확실한 사이트인 거 같다.
png2svg.com
4.16kb
색을 표현해주고 투명한 배경도 인식해서 잘 표현해준다. 하지만 그라데이션을 제대로 표현해주지 못하고, 그라데이션 사이에 검은 줄이 생긴다. (테두리 네모의 색이 검은색이라서 그런 것도 같다.)
검은색이나 단일색의 이미지라면 convertio.co 에서 변환하는게 좋다고 생각하지만, 색이 들어간다면 여기가 더 나을 것 같다.
adobe.com
10.3kb
그라데이션을 제대로 표현해주지 못하고 색과 색 사이에 흰 여백이 보인다. 그리고 검은색으로만 된 이미지를 변환해봐도 코드가 너무 많고 확대해보면 깔끔하게 나오지 않고 얼룩덜룩 더럽게 보이는 부분들이 보였었다.
또한 배경을 투명으로 설정한 png를 올려도 여기서 변환하면 배경이 흰색으로 나온다. 그나마 장점은 예제 이미지에서 사각형 테두리가 둥글게 표현되어 있는데 그것을 이 사이트에서만 제대로 구현했다. (다른 사이트는 각지게 표현됐다. 아마 예제 이미지 크기가 컸다면 다른 사이트에서도 제대로 구현이 되지 않았을까 싶다.)
그런데 일단 용량이 너무 커서 블로그에서 로고로 사용하기에는 부적절하다는 생각이 든다.
https://www.adobe.com/kr/express/feature/image/convert/png-to-svg
