▲GN⁺ 2025-04-13 | parent | ★ favorite | on: SVG로 만드는 멋진 것들(fuma-nama.vercel.app)Hacker News 의견 Sarah Drasner의 "SVG Can Do That?" 발표는 8년이 지났음에도 여전히 많은 사람들에게 놀라움을 줌. CSS는 그 이후로 많이 발전했지만, SVG 자체는 확신이 덜함. 어쨌든 강력히 추천됨 슬라이드: slides.com/sdrasner/svg-can-do-that 비디오: youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte SVG 파일로 할 수 있는 재미있는 것 중 하나는 인라인 DTD에서 엔티티를 사용하여 파일의 여러 곳에서 공유할 수 있는 상수를 정의하는 것임. David Ellsworth의 "Squares in Squares" 페이지에서 좋은 예를 볼 수 있음 주요 브라우저는 이와 관련된 문제가 없지만, Inkscape 같은 일부 도구는 DTD를 파싱하거나 엔티티를 확장하지 않음 kingbird.myphotos.cc/packing/squares_in_squares.html 복잡한 애니메이션 SVG는 재미있지만 SMIL의 복잡함과 Safari가 부동 소수점 앞에 0이 없어서 문제가 생기는 등의 문제로 인해 어려움이 있음 Nanda Syahrasyad의 "A Deep Dive Into SVG Path Commands"는 SVG 경로가 어떻게 구성되는지를 이해하는 데 매우 유용함. 거의 2년 전 자료이지만 SVG가 할 수 있는 모든 것과 그 방법에 대해 눈을 뜨게 해줌 nan.fyi/svg-paths JS를 창의적으로 사용하여 SVG를 동적으로 생성하고 있는 사람이라면, 저에게 DM을 보내길 바람 React로 구축된 프로젝트에서 SVG를 사용한 재미있는 작업을 했음. 정지된 일러스트레이션 시리즈와 애니메이션 요소가 있었고, 색상은 CMS로 제어됨 프론트엔드는 기본적으로 API를 호출하여 적절한 색상이 할당된 SVG 이미지를 반환받고, 애니메이션은 SVG 요소를 숨기고 보여주는 방식으로 수행됨 예시: web.archive.org/web/20221020133516im_/https://uncrowd.uk/illustrations/friction/bright_yellow.svg SVG+CSS는 매우 강력함. 내가 좋아하는 간단한 기능은 자바스크립트 없이 다크/라이트 모드를 존중하는 다이어그램을 만드는 것임. 예시 다이어그램: blog.davidv.dev/posts/ipvs-lb/ 선의 밀도를 허용하는 SVG 확장이 있는지 궁금함. 나는 펜을 들어 올리고 내릴 수 있는 플로터를 가지고 있으며, SVG 파일에서 구동됨. 선을 그리는 동안 펜을 내릴 수 있다면 좋겠음 아, Evil Mad Scientist Labs의 Axidraw임. 훌륭한 장치이며 멋진 사람들임 멋진 게시물이며, 사이트 디자인도 멋짐. SVG가 존재한 지 오래되었지만 그 잠재력은 아직 다 발휘되지 않은 느낌임. HTML, CSS, JS를 기능적으로 캡슐화할 수 있는 다른 요소는 생각나지 않음. 기본적으로 완전히 다른 HTML 문서처럼 쉽게 사용할 수 있음 SVG는 매우 탐구되지 않고 사용되지 않은 영역처럼 느껴짐. 상상력에 따라 많은 것을 할 수 있음. 그러나 많은 것을 "하드코어"하게 해야 할 수도 있으므로, 사용 사례에 따라 다름
Hacker News 의견
Sarah Drasner의 "SVG Can Do That?" 발표는 8년이 지났음에도 여전히 많은 사람들에게 놀라움을 줌. CSS는 그 이후로 많이 발전했지만, SVG 자체는 확신이 덜함. 어쨌든 강력히 추천됨
SVG 파일로 할 수 있는 재미있는 것 중 하나는 인라인 DTD에서 엔티티를 사용하여 파일의 여러 곳에서 공유할 수 있는 상수를 정의하는 것임. David Ellsworth의 "Squares in Squares" 페이지에서 좋은 예를 볼 수 있음
복잡한 애니메이션 SVG는 재미있지만 SMIL의 복잡함과 Safari가 부동 소수점 앞에 0이 없어서 문제가 생기는 등의 문제로 인해 어려움이 있음
Nanda Syahrasyad의 "A Deep Dive Into SVG Path Commands"는 SVG 경로가 어떻게 구성되는지를 이해하는 데 매우 유용함. 거의 2년 전 자료이지만 SVG가 할 수 있는 모든 것과 그 방법에 대해 눈을 뜨게 해줌
JS를 창의적으로 사용하여 SVG를 동적으로 생성하고 있는 사람이라면, 저에게 DM을 보내길 바람
React로 구축된 프로젝트에서 SVG를 사용한 재미있는 작업을 했음. 정지된 일러스트레이션 시리즈와 애니메이션 요소가 있었고, 색상은 CMS로 제어됨
SVG+CSS는 매우 강력함. 내가 좋아하는 간단한 기능은 자바스크립트 없이 다크/라이트 모드를 존중하는 다이어그램을 만드는 것임. 예시 다이어그램: blog.davidv.dev/posts/ipvs-lb/
선의 밀도를 허용하는 SVG 확장이 있는지 궁금함. 나는 펜을 들어 올리고 내릴 수 있는 플로터를 가지고 있으며, SVG 파일에서 구동됨. 선을 그리는 동안 펜을 내릴 수 있다면 좋겠음
멋진 게시물이며, 사이트 디자인도 멋짐. SVG가 존재한 지 오래되었지만 그 잠재력은 아직 다 발휘되지 않은 느낌임. HTML, CSS, JS를 기능적으로 캡슐화할 수 있는 다른 요소는 생각나지 않음. 기본적으로 완전히 다른 HTML 문서처럼 쉽게 사용할 수 있음
SVG는 매우 탐구되지 않고 사용되지 않은 영역처럼 느껴짐. 상상력에 따라 많은 것을 할 수 있음. 그러나 많은 것을 "하드코어"하게 해야 할 수도 있으므로, 사용 사례에 따라 다름