svg를 png로 변환합니다. 이미지를 래스터에서 벡터로 변환 CSS에서 SVG를 사용하는 방법에 대한 간략한 지침
브라우저를 사용하여 svg를 png로 저장해야 하는 경우가 있습니다. 불행하게도 브라우저에는 다양한 해킹 없이 이 작업을 수행할 수 있는 마법의 API가 없습니다. 그래도 원하는 것을 이루고 싶다면 어떻게 해야 하나요?
내 마음에 떠오른 첫 번째 아이디어는 toDataURL("image/png"); 메서드가 있는 캔버스를 통해 이 작업을 수행하는 것이었습니다.
그래서 저는 jsfiddle, github라는 간단한 스크립트를 작성했습니다.
Var html = document.querySelector("svg").parentNode.innerHTML; var imgsrc = "데이터:이미지/svg+xml;base64," + btoa(html); var canvas = document.querySelector("canvas"), context = canvas.getContext("2d"); canvas.setAttribute("너비", 526); canvas.setAttribute("높이", 233); var 이미지 = 새 이미지; image.src = imgsrc; image.onload = function () ( context.drawImage(image, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = " save"; a.download = "export_" + Date.now() + ".png"; a.href = canvasdata; document.body.appendChild(a); canvas.parentNode.removeChild(canvas); );
스크립트의 본질은 간단합니다. svg를 dataUri로 변환하고, 이미지를 통해 로드하고, 캔버스에 그림을 그린 후 png로 변환했습니다. 목표가 달성된 것 같았고, 마음 편히 쉴 수 있었습니다. 이 접근 방식은 Firefox와 Chrome에서 작동했지만 모두가 선호하는 브라우저인 IE에서 열었을 때 다음과 같은 놀라운 오류가 발생했습니다.
사실 IE는 이미지가 다른 호스트에서 로드되었다고 믿습니다. 안타깝게도 dataUri의 출처를 설정할 수 없습니다. 실제로 규칙에 대한 설명은 https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements에서 확인할 수 있습니다. 물론 서버를 통해 svg를 프록시하면 모든 것이 작동할 수 있지만 저는 순수한 클라이언트 측 솔루션을 원했습니다.
그러다가 멋진 canvg 라이브러리가 생각났습니다. 이 라이브러리를 사용하여 캔버스에 svg를 그린 다음 첫 번째 옵션인 toDataURL("image/png") 와 같이 진행합니다. 그 결과는 다음과 같은 간단한 코드입니다: github:
Var svg = document.querySelector("svg"); var 캔버스 = document.createElement("캔버스"); canvas.height = svg.getAttribute("높이"); canvas.width = svg.getAttribute("너비"); canvg(캔버스, svg.parentNode.innerHTML.trim()); var dataURL = canvas.toDataURL("image/png"); var data = atob(dataURL.substring("data:image/png;base64,".length)), asArray = new Uint8Array(data.length); for(var i = 0, len = data.length; i< len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob(, {type: "image/png"}); saveAs(blob, "export_" + Date.now() + ".png");
여기서는 FileSaver 라이브러리를 사용하여 저장 대화 상자를 표시했다는 점을 언급할 가치가 있습니다.
그게 다야, 우리는 원하는 결과를 얻었습니다.
한 가지 주목할 만한 점은 tauCharts 내보내기 플러그인을 작성할 때 svg를 png로 저장하는 것에 대해 궁금해했다는 것입니다. svg의 스타일은 외부 파일에서 설정되므로 원본 svg와의 유사성을 최대화하기 위해 svg에 인라인 스타일을 삽입합니다. 그리고 우리는 이런 결과를 얻습니다.
이 기사가 귀하에게 유용하고 시간을 절약할 수 있기를 바랍니다.
별로 잘 작동하지 않는 것 같습니다. 변환을 위해 -Flatten 플래그를 사용하는 예는 다음과 같습니다.
Sudo apt-get install potrace imagemagick 변환 -Flatten input.png 출력.ppm potrace -s 출력.ppm -o 출력.svg rm 출력.ppm
또 다른 흥미로운 현상은 PPM(256 * 3색, 즉 RGB), PPM(256색, 즉 회색조) 또는 PPM(2색만, 즉 흰색 또는 검정색만)을 사용할 수 있다는 것입니다. 제한된 관찰에 따르면 앤티앨리어싱된 이미지에서 PPM과 PPM(동일한 SVG를 생성하는 것)은 색상 영역을 축소하는 반면 PPM은 색상 영역을 약간 확장하는 것으로 보입니다. 아마도 이는 픽셀 > (256 / 2) 테스트와 픽셀 > 0 테스트의 차이일 것입니다. 파일 확장자를 변경하여 둘 사이를 전환할 수 있습니다. 즉, 다음은 PPM을 사용합니다.
Sudo apt-get install potrace imagemagick 변환 - flatten input.png 출력.pbm potrace -s 출력.pbm -o 출력.svg rm 출력.pbm
PNG 이미지를 SVG로 변환하는 방법은 무엇입니까?
그러나 이는 이상적이지 않습니다.
Png는 비트맵 스타일이고 SVG는 비트맵을 지원하는 벡터 그래픽 디자인이므로 이미지를 벡터로 변환하지 않고 벡터 형식에 포함된 이미지만 변환합니다. 무료인 http://www.inkscape.org/를 사용하여 이 작업을 수행할 수 있습니다. 이를 주입하지만 원하는 경우 (potrace를 사용하여) 경로로 변환하려고 시도하는 Live Trace 엔진도 있습니다. Adobe Illustrator의 Direct Tracing(상업용)을 참조하세요.
일부 Linux 시스템을 사용하는 경우 imagemagick이 이상적입니다. 저것들.
somefile.png 변환 somefile.svg
이는 다양한 형식에서 작동합니다.
그러나 비디오 및 오디오(ffmpeg)와 같은 다른 미디어의 경우 나는 당신이 png에서 svg로 명확하게 언급했다는 것을 알고 있습니다. 그것은 여전히 미디어에 관한 것입니다.
Ffmpeg -i somefile.mp3 somefile.ogg
많은 파일을 살펴보고 싶다면 힌트를 주세요. 기본 쉘 트릭을 사용하여 루프를 만듭니다.
*.jpg의 f에 대해; $f $(f%jpg)png를 변환하세요; 완료
이렇게 하면 jpg가 제거되고 png가 추가되어 원하는 것을 변환하도록 지시합니다.
이미지를 업로드하고 결과를 볼 수 있는 웹사이트가 있습니다.
하지만 svg 이미지를 다운로드하려면 등록이 필요합니다. (등록하시면 이미지 2개를 무료로 받으실 수 있습니다)
Adobe 일러스트레이터를 사용하여:
어도비 일러스트레이터를 엽니다. "파일"을 클릭하고 "열기"를 선택하여 .PNG 파일을 프로그램에 로드합니다. .SVG 파일로 저장하기 전에 필요에 따라 이미지를 추출합니다. "파일"을 클릭하고 "다른 이름으로 저장"을 선택하십시오. 새 파일 이름을 만들거나 기존 이름을 사용합니다. 선택한 파일 형식이 SVG인지 확인하세요. 디렉터리를 선택하고 "저장"을 클릭하여 파일을 저장합니다.
나는 AI를 선호합니다. 왜냐하면 당신은 무엇이든 변경할 수 있기 때문입니다.
나는 당신이 이것을 하기 위한 소프트웨어를 작성하고 싶어한다고 추측합니다. 이를 순진하게 수행하려면 선을 찾고 벡터를 설정하기만 하면 됩니다. 이를 지능적으로 수행하려면 그림을 도면에 맞추십시오(모델 피팅). 또한 래스터 영역(부끄러움을 사용하거나 텍스처를 적용하여 모델링할 수 없는 영역)을 정의해야 합니다. 시간이 꽤 오래 걸리고 약간의 그래픽 및 컴퓨터 비전 지식이 필요하므로 이 방법을 사용하지 않는 것이 좋습니다. , 출력은 원래 출력보다 훨씬 더 크고 확장성이 뛰어납니다.
프로젝트 중 하나에서는 svg 형식의 작은 아이콘이 메뉴 근처에 표시되었으며 메뉴 항목 위에 커서를 올리면 텍스트와 아이콘의 색상이 변경되어야 했습니다. 많은 양의 그림을 생성하지 않기 위해 svg를 코드로 변환하여 CSS 스타일로 사용하기로 결정했습니다.
CSS에서 SVG를 사용하는 방법에 대한 간략한 지침
CSS 파일에서 결과 코드를 사용합니다.
예를 들어 Facebook 아이콘(약간 수정된 표준 아이콘)을 사용합니다.
웹사이트 https://jakearchibald.github.io/svgomg/ 클릭 "SVG 열기"또는 아이콘을 보기 영역으로 드래그하면 됩니다. 왼쪽 상단에서 클릭하세요. "암호", 코드를 강조 표시한 다음 복사 아이콘, 그래서 우리는 SVG 이미지의 코드를 버퍼로 가져올 것입니다.
이 같은:
그런 다음 결과 코드를 위 창에 붙여넣고 변환을 클릭하여 완성된 코드를 가져옵니다. 배경 이미지:
배경 이미지: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"%3e%3cpath fill-rule="evenodd" 클립-rule="evenodd" fill="%23FFF" d="M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h -4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h -3v3h3v8h3v-8h4z"/%3e%3c/svg%3e");
복사하여 CSS에 사용하세요.
색상을 변경하려면 fill="%23FFF" 를 변경하세요. %23은 일반 # 기호입니다. 즉, fill="%23000"은 일반 검정색(#000)입니다.
다음과 같은 래스터 이미지에서 변환할 때 PNG를 SVG로또는 JPG를 SVG로, 품질 저하 없이 확대할 수 있는 벡터 그래픽의 흑백 이미지로 양식과 개체를 변환합니다. 그런 다음 Inkscape와 같은 벡터 그래픽 편집기에서 페인트할 수 있습니다.
일반 사진을 변환하면 원하는 결과를 얻지 못할 가능성이 높습니다.
SVG로 변환할 때 최상의 결과를 얻으려면 배경이 단색인 이미지를 사용하세요.
- SVG로 변환하려면 파일을 선택하고 서버에 다운로드될 때까지 기다리세요.
- 거의 모든 이미지 형식(PNG, JPG, BMP 등)을 지원합니다. 파일 크기에는 제한이 없지만 파일이 클수록 변환하는 데 더 많은 시간이 걸립니다.
- 변환 후에는 원본 파일과 그 아래에 결과가 표시됩니다.
- 링크를 통해 결과를 다운로드하세요.
SVG 형식이 필요한 이유와 사용 방법은 무엇입니까? PNG를 SVG로 또는 JPG를 SVG로 변환한 후
SVG(Scalable Vector Graphics)는 XML 기반 벡터 그래픽 형식입니다.
장점은 품질과 디테일을 잃지 않고 이미지 크기를 변경할 수 있다는 것입니다. 크기를 늘리면 벡터 이미지가 곡선의 모양을 유지하므로 이미지가 어떤 해상도에서도 표시될 수 있습니다.
