웹 페이지의 스크린 샷을 SVG 이미지로 찍을 수 있습니까?

31

완전히 벡터 기반의 웹 페이지 (텍스트, 아이콘 글꼴, SVG, PNG, JPEG 또는 GIF는 없음)가 있습니다.

해당 웹 페이지의 벡터 스크린 샷을 만들어 확장 가능한 SVG 파일로 저장하는 방법이 있습니까?
(일반적인 PC에서 스크린 샷을 찍어 망막에 잘 보이도록 할 수 있도록)

이것은 가능해야하지만 할 일을 찾을 수 없습니다.

추가 크레딧 : 비트 맵 이미지가 몇 개인 경우 비트 맵이 포함 된 SVG가 필요합니다.

html screenshot svg

— 슬랙
소스

것 같습니다 html2canvas.hertzen.com가 여기에 도움이 될 수 있습니다.

— SLaks

1

.html 파일이 실제로 원하는 것이 아닙니까?

— Sparr

@Sparr : 아니오; 편집기에서 SVG를 조작 (예 : 자르기, 배너 추가) 한 다음에 삽입하고 싶습니다 <img>. (

— 웹앱

PNG 또는 JPEG 파일은 어떻게 SVG로 변환됩니까?

— HairOfTheDog

7

이것은 놀라운 유용한 아이디어입니다. 특히 기존 웹 사이트의 진화에 대해 작업해야하는 UI 디자이너에게 적합합니다. 비트 맵 소프트웨어를 사용한 모형 작업을 싫어하기 때문에 SVG 내보내기 기능을 갖춘 도구에 대한 비용을 지불합니다.

— smonff

10

스크린 샷은 아니지만 페이지가 잘 인쇄되면 PDF로 인쇄 할 수 있습니다. Inkscape와 Illustrator는 모두 PDF를로드하고 필요한 경우 SVG로 저장합니다.

— 단
소스

이것을 시도했을 때 Firefox는 비트 맵 라디오 버튼을 PDF 파일로 인쇄했습니다. Chromium-browser 및 wkhtmltopdf는 모든 벡터 파일을 생성했습니다.

— 랜달 휘트먼

9

CSSBox WebVector 는 HTML 페이지를 SVG로 변환합니다. Java 명령 행 애플리케이션이며 여기에서 출력 샘플을 볼 수 있습니다 .

— 앤드류
소스

실제로 명령 행 및 GUI 모드. 라디오 버튼이 포함 된 작은 HTML 양식을 SVG로 내보내려고 WebVector를 사용해 보았습니다. 임베디드 비트 맵 컨텐츠가없는 원하는 벡터 컨텐츠를 포함하는 SVG 파일을 생성했습니다. 라디오 버튼은 정사각형으로 렌더링되며 일반적인 렌더링의 확인란처럼 보입니다.

— 랜달 휘트먼

2

이것은 이미 Chrome의 대형 웹 페이지 캡처 스크린 샷에서 답변 되었습니다.

CutyCapt를 사용 하여 웹킷의 렌더링 이미지를 캡처합니다.

CutyCapt는 WebKit의 웹 페이지 렌더링을 SVG, PDF, PS, PNG, JPEG, TIFF, GIF 및 BMP를 포함한 다양한 벡터 및 비트 맵 형식으로 캡처하는 작은 플랫폼 간 명령 줄 유틸리티입니다. Internet Explorer 기반의 유사한 도구에 대해서는 IECapt를 참조하십시오.

— chx
소스

라디오 버튼이 포함 된 작은 HTML 양식을 SVG로 내보내려고 CutyCapt를 사용해 보았습니다. 부분적으로 벡터와 부분적으로 비트 맵 내용을 포함하는 SVG 파일을 생성했습니다.

— 랜달 휘트먼

CutyCapt는 우분투 18.04의 정식 저장소에서 사용할 수 있으므로 sudo apt install cutycapt시도하기 위해 필요한 모든 것입니다. 몇 초 지연 ( --delay=3000)으로 심지어 mathjax를 렌더링합니다!

— cheshirekow

0

한 가지 방법 : 래스터 스크린 샷 (PNG, JPG 등)을 사용하는 경우 Inkscape에서 "비트 맵 추적"을 사용하여 스크린 샷의 특정 관련 색상 필드를 벡터 객체로 "변환"할 수 있습니다. Adobe Illustrator에 동등한 도구가 있다고 확신합니다. 추적하기 위해 지정한 개별 색상 수에주의하십시오. 결과로 생성되는 벡터 파일은 빠르게 복잡해질 수 있습니다. 각 색상은 원본 래스터 이미지를 나타 내기 위해 다른 색상 객체와 겹치는 별도의 벡터 객체이므로 약간의 정리가 필요할 수 있습니다.

— 아담 eck
소스

1

설정을 올바르게 수행하려면 많은 작업이 필요하지만 이것이 허용되지 않을 것이라고 생각합니다. 그러나 당신은 모른다. Adobe Flash에서도이 작업을 수행 할 수 있으며 다른 방식으로 작업을 수행하므로 결과가 나빠질 수 있습니다.

— SPRBRN

-1

도움이 될 수 있습니다. https://pdfcrowd.com/ 의 도구를 사용하는 PDF로 저장이라는 Firefox에 추가 기능이 있습니다 . 최종 SVG 출력을 위해 온라인 도구 중 하나를 사용하여 SVG로 변환합니다.

— 페트르 S
소스