SVG 그라디언트 구현

SVG에서 이런 종류의 흐릿한 그라디언트를 재현 할 수 있습니까?

svg gradient

답변:

예, 아니오

Inkscape에서 그라디언트 메쉬를 만들어 SVG로 저장할 수 있습니다. 그러나 브라우저에서 사용되는 SVG 표준은 아직 그라디언트 메쉬를 지원하지 않습니다. 이것은 미래에 변경 될 수 있지만 현재는 그렇지 않습니다.

브라우저에서 작동하는 또 다른 방법은 여러 개의 솔리드 객체를 추가하고 흐리게 처리 한 후 클리핑 마스크에 넣는 것입니다. 이것은 여전히 순수한 벡터 솔루션이며 래스터 화되지 않았습니다.

원하는 경우 브라우저에서 작동하는 버전의 SVG가 있습니다.

편집 : SVG에 대한 위의 링크를 더 이상 사용할 수 없으므로 제거했습니다.

— 빌리 커
소스

멋지다! 링크의 SVG는 답변에 제공된 삽입물처럼 보이지 않지만 훨씬 가벼워 보입니다. 이것에 대한 이유가 있습니까?

— Jared Garcia

당신이 잉크 스케이프의 최신 버전을 사용하고 있지만, 확인 - - 지금 버전 0.92에서 내 화면 캡처는 잉크 스케이프에서 내 컴퓨터에 정확히 SVG 일치 - @JaredGarcia 내가 왜 아무 생각도 없어

— 빌리 커에게

아, 나는 다운로드 링크에서 바로 모바일 브라우저로 그것을보고있었습니다. Inkscape에서 열어서 확인하겠습니다.

— Jared Garcia

@JaredGarcia는 새로운 질문으로 게시하여 제대로 대답 할 수 있습니다.

— 앤드류 T.

브라우저에서 흐리게 처리하는 것은 정말 비쌉니다. 배경 그라디언트를 계층화하여 동일한 효과를 얻을 수 있습니다. 이것들은 애니메이션 가능합니다. 최신 브라우저에서 추가 효과를 위해 배경 블렌드 모드를 사용할 수 있습니다.

— PieBie

Illustrator 및 Inkscape에서 그라디언트 메쉬로 만들 수 있습니다. 레거시 Illustrator에서 SVG로 저장하면 비트 맵 이미지로 변환됩니다. 분명히 Illustator는 약 6 년 전에 알고 있었지만 SVG 언어는 알지 못했습니다.

Inkscape SVG가 아닌 일반 SVG로 Inkscape에 저장하면 그라디언트 메쉬로 유지되고 텍스트 편집기로 SVG 파일을 열면 meshgradient 명령이 나타납니다. 코드 스 니펫보기

따라서 표준을 모른 채 "적어도 잉크 스케이프의 일반 SVG로 구현되었습니다"라고 말할 수 있습니다.

누군가 SVG 개발 상태 인식 프로그래머가 정확한 것을 말하고 싶습니다.

— 사용자 287001
소스

올바른 코드 형식으로 여기에 코드를 직접 포함시킬 수 있습니다. 스크린 샷을 게시 할 필요가 없습니다.

— Wrzlprmft

안타깝게도 Inkscape의 그라디언트 메쉬는 아직 Chrome 또는 Firefox에서 지원되지 않습니다.

— Billy Kerr

svg 코드를 게시 할 수 있습니까

— Jared Garcia

@JaredGarcia하지 않았습니다. 25의 노드 10 개만 채워서 제대로 보이도록했습니다. 직접 만들 수 있습니다. 이미지를 Inkscape로 가져 와서 같은 크기의 정사각형을 만들고 채우기 유형 = 그라디언트 메쉬를 설정하고 메쉬 도구로 3 행과 열을 더 추가하십시오. 노드 도구를 사용하여 노드를 하나씩 선택하고 색상 피커를 사용하여 가져온 이미지의 색상. 일반 SVG로 저장하고 Win 메모장에서 열어 코드를 봅니다.

— user287001

가볍고 확장 가능한 메쉬 그라디언트를 목표로하는 경우이 방법을 시도 할 수 있습니다.

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

벡터는 아니지만 파일 크기가 매우 작고 이미지 크기가 무한대로 조정되기 때문에 그럴 수도 있습니다.

— Peterhry
소스

GDSE에 오신 것을 환영합니다 . 둘러 보기를 둘러 보고 어떻게 요청 하고 어떻게 대답 하는지 질문 하는 방법에 대해 알아보십시오. 도움말 센터 를 둘러 보는 동안 전체 행동 코드를 너무 잘 보는 것이 좋습니다. 귀하의 답변은 귀하가 공유 한 적용 성 측면에서 좋은 답변이지만 GDSE 에서는 참조 용으로 만 링크를 사용하는 것이 좋습니다 또는 링크가 너무 쉽게 변경되거나 사라짐에 따라 리소스를 묶는 것 : 자신의 본문에 묶는 내용을 요약 해 주시겠습니까?

— GerardFalla