아이콘이 아닌 것에 SVG를 사용해도 되나요?
275
작성한 질문수 4
안녕하세요,
저는 회사에서 퍼블리셔로 일하고 있습니다. 제가 지금 주로 하는 일이 디자이너님이 기계 설계도면을 일러스트로 작업하시고 SVG로 변환하여 저한테 주시면 저는 그 설계도면 중 어떤 요소들을 애니메이션 주는 기능을 추가하고 있습니다. 예를 들면 팬이 계속 해서 돌아가는 애니메이션을 준다던지 어떤 설비를 클릭하면 모달창이 뜨게 하는데 그 모달창을 퍼블리싱하는 등의 일을 하고 있습니다.
제가 여기서 궁금한 것은 제가 하는 업무가 SVG를 활용해도 되는 것인지 해서요. 스튜디오밀님의 강의에서는 SVG를 아이콘이나 이미지 등에 많이 쓰이고 사이즈가 너무 크면 느리다고 하셨는데 제가 지금 작업하고 있는 SVG파일 크기는 지금 상태에서는 157KB 정도 이고 제가 하는 일에 SVG를 사용하는 것이 맞는지 의문이 듭니다.
제가 처음 이 업무를 받았을 때, 아무리 생각해도 설계도면을 CSS로 일일이 그리고 애니메이션을 주는 것은 말도 안된다고 생각해서 SVG로 작업하고 있는데 제가 잘 선택한 것이 맞는지 해서요.. 사수에게 묻고 싶지만 회사에서는 퍼블리셔가 저밖에 없습니다. 저는 퍼블리싱 공부 6개월 하고 취업한 거라 이런 부분에서 가이드를 주실 분이 안계시네요.
혹시 제가 하고 있는 업무가 SVG를 활용하는 것에 대해서 스튜디오밀님의 의견이 궁금해서 이렇게 질문 남깁니다.
좋은 강의 만들어주셔서 감사합니다.
답변 1
4
먼저, 이미지의 크기가 커진다고 SVG의 파일사이즈가 커지는 것은 아니고요, 포인트가 많을 수록 복잡해져서 파일사이즈도 커지고 렌더링도 느려집니다. 즉 큰 이미지가 아니라 복잡하게 생긴 이미지일수록 파일사이즈가 커지는거지요~
설계도면에 SVG를 사용하시는건 아주 적합하다고 생각됩니다^^
아이콘 외에 그냥 비주얼 영역에 쓰이는 일러스트들도 요즘은 SVG로 많이 사용한답니다~
연휴 마무리 잘 하세요!
svg 직접 그리기
0
59
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
0
585
1
atom 서비스 종료, emmet 설치안됨
0
1425
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1564
1
마스크가 안돼요..
0
431
2
강의 노션
0
404
1
강의 노션
0
341
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
237
1
path 를 x ,y로 이동
0
287
1
같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?
0
363
1
마스크2 돋보기 질문
0
391
1
압축에 관하여
0
280
1
svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요
0
418
2
패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ
0
514
1
글씨 깨짐
0
434
1
smil 무한반복 질문
0
236
1
SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)
0
334
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
265
1
path로 그린 svg 화면 꽉채우기
0
883
1
svg 파일 불러오기
0
369
1
svg 태그 질문!
0
234
1





