음악, 삶, 개발

앞서 일러스트레이서 만든 SVG 를 VSCode 로 Copy & Paste 하면 코드가 된다고 하였다. 하지만 꽤나 지저분해보이며, 쓸데없는 코드를 일일히 지워야하는 수고가 있다. 이를 해결해주는 사이트가 있다. jakearchibald.github.io/svgomg/ VSCode 에 복붙하기전에, 위 사이트에 붙여넣기를 하면 쑬데없는 코드를 지워주고, path 또한 간결하게 만들수있어서, 최종 용량이 줄어준다. 한가지 기억해야할것은, 이 사이트를 이용시 polygon 이 path 로 변환된다. style 링을 css 에서 할거라면, style 태그또한 삭제할수있다.

일러스트레이서의 Stroke 패널의 Align Stroke 메뉴는, Stroke 를 중심을 기준으로 커지게할지 (Center), 안쪽으로 커지게할지 (Inside), 바깥쪽으로 커지게할지 결정할수있다 (Outside). 이 기능을 사용할때 주의할점은 SVG 코드로 뽑아냈을때, polygon 인지 path 인지 달라진다는것이다. Align Stroke to Center : Align Stroke to Inside : Align Stroke to Outside : 위의 결과는 VSCode 에 각각을 붙여넣기해보면 확인할수있다. Align Stroke to Center 일때. Align Stroke to Inside 일때. Inside 나 Outside 는 결국 가운데가 뚤려있다. 따라서 보다시피 path 가..

MDN : preserveAspectRatio stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container 복잡한 모양을 순수 CSS 에서 만들어내는것은 꽤나 고통스러운일이다. 따라서 SVG 를 HTML 에서 사용하는 방법을 다루어보고자한다. 나는 Vue 를 사용하고있기때문에, Vue 에서 사용법을 다루겠다. 1. 일러스트레이터에서 Cmd + C (복사) ---> VSCode 에서 Cmd + V (붙여넣기) 위와 같이 일러스트레이터에서 VScode 로 복사 붙여넣기를 할수있다. 이때 중요한것은 독립된 .vue 파일을 만들고 안에 붙여넣기하는것이다. 2. svg 안에 style 태그안에 내..