어쩌다 하게 되었나...

일러스트나 여러 벡터 제작 툴에서 svg를 수정할 수 있긴 하다
그런데 코드가 좀 더러웠다

svg를 통째로 코드에 넣는 것을 선호하는데 ( 이게 맞는 건지는 모르겠다 )
일러스트는 너무 무거워서 다양한 환경에서 작업하기 쉽지 않았고 ( 설치 문제 )
예전에 봐놨던 프로그램을 svg제작툴~~ 키워드로 찾아내서 썼다

예전에 깔끔한 svg 코드를 위해 소숫점 지우는 작업을 했었었고
원래 일러스트나 도면을 좀 쳤었기 때문에 .. 백터 작업은 매우 익숙했다

이런 작업의 장점 :

• 전체 용량이 굉장히 줄어든다
• 간단한 수정을 바로바로 할 수 있다 svg 코드를 ( 이해하고 있을 경우 )
• 엑스박스 오류 같은게 뜰 수가 없다
• 간단한 아이콘 작업 할 때 좋다

단점 :

• 사이즈 제어를 좀 해줘야 한다 ( 아래에 나온다 )
• 아주 디테일한 것의 제작은 어렵다 ( 마스크 효과 넣고 ... 중첩 레이어에 효과 넣어서 하는 것들은 좀 제한적이다 ) 할 수는 있는데... SVG 개고수가 되야한다 그렇게까지 해야할까ㅠ..그런작업은 일러쓰자

유용한 작업 도구와 방향성

svg를 최적화하겠다고 냅다 M이 뭐고 C는 뭐고 A는 뭐고 좌표계는 어떻고... 하는 건 너무 어렵고 시간도 오래걸린다

좋은 도구가 있으면 잘 쓰는게 좋다고 생각한다

유용한 작업 도구

svg 중 path 작업을 웹으로 할 수 있는 사이트

svg path editor

일러스트로 작업할 수도 있긴 하다

하지만 일러스트의 경우 SVG가 최적화되어있지 않다 ( 하지만 레이아웃이나 그라데이션 , 마스크 등의 기능들이 들어가 있을 거라서 분석해볼만한 요소는 있을 것 같다 )

svg 코드를 해석해주는 사이트 ( 영어지만 )

마우스 호버로 추적이 가능해서 유용하다
svg path visualizer

svg 안내서

mdn svg

방향성

사이트로 svg를 불러와서 변환할수 없는 것은 아쉽지만
이런 좋은 도구와 다양한 방식의 노가다를 통해 보다 빠르게 작업을 완수 할 수 있다

그리고 일러스트나 XD 등으로 제작된 svg도 텍스트 에디터로 열어보면 코드를 볼 수 있기 때문에 사용할 수록 더 나은 제작 방법을 알 수 있지 않을까

활용 방식

우선 만들기 쉬운 형태로 만든다

만약 아랫방향을 보는 화살표 같은 걸 만들 때
화살표를 대각선으로 만들려고하면 머리가 아프다

화살표는 45도 돌리면 사각형이 되는 스타일이 가장 보편적이다
그러니 나도 쉽게 접근할 수 있도록 대각선이 최대한 적게 들어가게 작업을 한다

결과물

    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -17 17 17" width="100" height="100">
        <path d="M 2 0 L 15 0 A 1 1 0 0 0 15 -4 L 5 -4 A 1 1 0 0 1 4 -5 L 4 -15 A 1 1 0 0 0 0 -15 L 0 -2 A 2 2 0 0 0 2 0 Z" fill="#000000"/>
      </svg>
    </div>

회전이나 크기 수정은 CSS로

svg는 벡터다
크기가 어떻든간에 html 상에서의 크기가 충분하면 된다
너무 크면... width="100" height="100" 를 붙여서 해결한다
위 코드에도 들어가 있다

쓰려고 만든 화살표 대가리....

이제 이걸 45도로 돌려서 다 사용할 것이다
쓸 때 svg를 감싸는 div 가 하나 있어주는게 좋은데
정렬을 해줘야하기 때문에 필요하다
확실한 걸 원한다면 overflow : hidden 으로 가려서 깔끔하게 동작하게 할 수 있을 것이다

div.icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  svg{
    width: 70px;
    height: 70px;
    fill: #000;
    transform: rotateZ(45deg);
  }
}

svg에는 0.7!

45도 돌렸을 때 x , y 가 원하는 width, height 되게 하기

svg를 돌리면 가로 세로 면적이 커져서 주변을 밀어낼 우려가 있기 때문에 가장 면적이 커지는 45도에 맞춰서 svg의 크기를 줄여 div와 맞춰주는게 좋아보인다

삼각형은 대각선 길이로 반지름 등을 계산할 수 있고 실제로 회전해보면 실제로 대략 1.41 배 (루트2)만큼 커진다 고로 대충 0.700배로 svg 사이즈를 맞추면 잘맞는다!

대략 70.7~70.8 언저리인데 ... 절삭해서 70이 딱인 것 같다
아무튼 view box가 사각형이기 때문에 자주 사용될 듯 하다

사용할 div box 크기의 0.7 배 정도 = svg 로 생각하기로 했다

svg는 div 박스 사이즈에 맞춰서 들어가고
넘치면 사이즈가 줄어들어서 div에 맞게 들어가긴해서 별로 상관 없게 느껴져서 테스트 해봤는데...

정비율에서는 회전이 들어갈 때는 넘치기 때문에 유용해진다

왼쪽이 div 70% , 오른쪽은 div 100%