SVG4

• 

  (Illustrator) 원하는 이미지를 아이콘 SVG파일로 만드는 방법 원하는 이미지를 아이콘 SVG파일로 만들기 오늘은 Adobe Illustrator으로 원하는 아이콘을 가져와서 SVG파일로 만들어주는 방법에 대해 알아보도록 하겠습니다. SVG 벡터 이미지 만드는 방법 먼저, 원하는 아이콘을 구글이나 다양한 경로를 통해 스크린샷해서 파일을 저장합니다. 그리고 Adobe Illustrator을 열어준 뒤에, 해당 스크린샷을 업로드해주겠습니다. 저는 Notion 아이콘을 예로 들어서 진행해볼까 합니다. 파일 업로드 Adobe Illustrator에 업로드합니다. Image Trace 활성화 파일을 업로드했다면, 상단 바에 Window - Image Trace를 차례로 눌러 활성화시켜줍니다. 그러면 아래와 같이 Image Trace 도구가 활성화되는데, 하단부 Preview에.. ADOBE/Illustrator 2022. 7. 1.

• 

  (Javascript) HTML SVG파일에 원하는 색상 적용하는 방법 HTML SVG파일 색상 변경 코드 Html에서 Img 태그에 SVG파일을 업로드하고 난 후, 색상을 변경하고 싶을 때가 있는데, 그때 CSS Filter 효과를 통해 원하는 색상을 입혀줄 수 있습니다. 먼저, 원하는 HEX 코드가 필요합니다. HEX 코드는 다양한 경로를 통해 알 수 있는데 아래 사이트에서 Color Picker를 통해 알아내거나, 원하는 이미지를 업로드해서 HEX코드를 따올 수 있습니다. 👍 Color Picker online | HEX Color Picker | HTML Color Picker Color Picker:Color Picker: With this online tool you can upload an image or provide a website URL and get t.. FRONT-END/JAVASCRIPT 2022. 6. 30.

• 

  사파리에서 SVG가 나타나지 않을때 해결방법 사파리에서 SVG가 나타나지 않을 때 해결방법 티스토리 스킨을 꾸미면서 SVG를 사용하는 경우가 종종 있는데, SVG형식의 요소가 iPhone, iPad, MacBook 등 크롬, 사파리를 막론하고 SVG가 나타나지 않은 현상을 발견했습니다. 우선, 맥북에서 크로미움 브라우저로 접속하면 아래와 같이 정상적으로 출력되는것을 확인했지만, 이상하게도 iPhone 또는 iPad에서는 SVG가 나타나지 않았습니다. 그래서 MacBook을 통해 사파리로 접속후, 개발자 도구를 열어 확인해 보았습니다. ?! 애니메이션을 멈추고 보니 컨테이너를 완전히 벗어난 width 497px, height 497px로 되어 컨테이너에 담기지 못한 것이었습니다. 사파리에서 종종 SVG를 인식하거나 지원하지 않은 경우가 있다고 했었.. TIP/Etc Tip 2022. 6. 28.

• 

  (티스토리) 카테고리 새 글 발생 시 나오는 NEW 아이콘 변경하는 방법 - 아이콘 첨부! 티스토리에서 새 글을 발행하면 카테고리에 아이콘이 생기는 것을 확인할 수 있는데, 이번에는 이 애매하고 예쁘지도 않은 아이콘을 원하는 이미지로 변경하는 방법을 알아볼까 합니다. 직접 일러스트레이트로 따와서 SVG 파일로 변경한 이미지 파일도 첨부합니다! 많은 분들이 이미 알고 계신 줄 알았는데 댓글로 요청해주셔서 이번 기회에 포스팅해봅니다! 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 카테고리 새 글 아이콘 변경.. TIP/CSS & Tistory 2022. 3. 16.