당신은 이런 SVG 기술을 알고 있습니까?

나는 최근에 매우 흥분되는 세 가지 기술SVG을 발견했다.

SVG을(를) 사용하여 canvas이미지를 변환합니다.

HiDPI Canvas

프리페치 SVG: Verrrryyyy cool

나는 너에게 그들에 관한 일을 알려줄 때까지 기다릴 수 없다.

배경 이야기

몇 달 전에 저는 Faviator을 만들었고 지금까지 아주 좋은 피드백을 받았습니다.만약 아직 이렇게 하지 않았다면, 별을 보고 추가하십시오.
Faviator는 convert-svg라는 라이브러리에 의존하고 있으며, 이 라이브러리는 기본적으로 SVG의 화면 캡처를 캡처했다.이 라이브러리를 선택한 이유는 직관적인 API와 사용puppeteer이라는 사실 때문에 이미지 출력이 크롬에서 본 것과 완전히 같을 수 있기 때문이다.
그러나 이 재고는 두 가지 주요 문제에 있다.

이미지 품질이 좋지 않다.모호한 이미지 생성

캡처

시 CSS@import() 또는 url()가 항상 로드되지 않음

Don't get me wrong. convert-svg is still an amazing project!

두 번째 문제는 Faviator 에서 글꼴 파일을 가져오는 데 매우 중요하다.나는 확실히 그것을 복구하는 방법을 찾았고 Google Fonts 한 부를 제출했지만 업주는 너무 바빠서 프로젝트에 쓸 시간이 없는 것 같다.
그래서 나는 자신의 것을 만들기로 결정했다. PR;이 문제들을 해결하기 위한 것이다.이 문제를 연구하는 과정에서 저는 SVG와 결합하여 사용하는 매우 멋진 기술을 발견했습니다. 그래서 저는 제 발견에 관한 블로그 글을 쓸 수 있을 것 같습니다.

@ycm。jason/svg~img 변환 SVG를 사용하여 이미지 처리

제가 언급한 바와 같이 canvas 를 이미지로 바꾸는 방법은 SVG 을 사용하여 화면 캡처를 하는 것입니다.이것은 사실상 매우 좋은 방법이다. 왜냐하면 우리는 렌더링 puppeteer 과정에서 발생할 수 있는 어떠한 오류도 걱정할 필요가 없기 때문이다.
또 다른 방법은 HTML5SVG를 사용하는 것이다.canvas 방법으로 canvas 에서 쉽게 그릴 수 있습니다 <img>.조합으로서, drawImage 도형을 PNG 또는 JPEG 형식으로 내보내는 방법도 제공됩니다.
할 수 있다그럼 어때요?
이것은 우리가 할 수 있다는 것을 의미한다.

SVG

방향<img>

<img>에서 그리기<canvas>

을(를) PNG 또는 JPEG

로 내보내기
다음은 빠른 프레젠테이션입니다.

const img = document.createElement('img');
img.src = 'some/path/to/the/awesome.svg';
img.onload = () => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  // draw img to (0, 0) on the canvas
  context.drawImage(img, 0, 0);
  // export the PNG or JPEG
  const pngDataURL = canvas.toDataURL('image/png');
  const jpegDataURL = canvas.toDataURL('image/jpeg');
  // ... do something with them ...
};

이 모든 것은 브라우저에서 발생하며 canvas 브라우저와 노드를 동시에 지원할 수 있습니다.jstoDataURL.

@ycm。jason/svg~img 인형 배우

HiDPI Canvas는 Paul Lewis가 소개한 기술입니다.그것은 고DPI 설비의 문제와 도면을 해결했다.자세한 설명은hisHiDPI Canvas를 참조하십시오.
요약:

폭과 높이를 유지하기 위해 고DPI 장치에서 2x 픽셀로 캔버스 드로잉 그리기

이것은 기본적으로 이미지를 확대하여 이미지를 모호하게 만든다

이 문제를 해결하기 위해 우리는 예상 크기의 2배에 달하는 화포를 그리고 CSS를 사용하여 예상 크기로 줄일 수 있다.

빠른 예제 (200x500을 그리기 위해):

<canvas width="400" height="1000" style="width: 200; height: 500">
</canvas>

이 기술은 나로 하여금 고DPI 화면에서 canvas 를 선명한 이미지로 전환할 수 있게 한다.그러나 이미지 크기를 수동으로 조정해야 합니다.현재의 실현 사용article이지만, 나는 이를 위해 비교적 작은 실현을 작성할 계획이다.(지금부터 나는 전체 몬스터SVG를 가방에 포함한다.이건 죄악이야...)
너는 그것들이 얼마나 다른지 볼 수 있다.
원래 SVG
jimp
jimp
(표시된 이미지는 SVG가 아닙니다... 이미지 호스트에서 png으로 변환합니다...)
HiDPI 기술 없음

HiDPI 기술 사용
https://svgshare.com/i/7Sp.svg
너는 차이를 볼 수 있니?"F"프롬프트에 주목하면 마지막으로 원래 SVG와 일치하는 방법을 알 수 있습니다.
이것은 확실히 그림의 디테일을 개선시켰지만, 여전히 약간 모호해 보인다.이것은 이미지의 크기 조정으로 인해 일어날 수 있습니다.나는 영상 처리 전문가가 아니다. 만약 네가 나에게 유용한 기술을 알려줄 수 있다면, 나는 이곳에서 사용할 수 있다.

프리페치 SVG

CSS는 스타일을 제어하기 위해 SVG에 포함될 수 있습니다.CSS3의 도입에 따라 css 정의에 css를 포함할 수 있습니다!너무 좋아요!
그러나 <canvas>에 SVG를 표시하면 이러한 스타일이 가져오지 않은 것을 발견할 수 있습니다.<img> 에서 SVG를 사용하는 경우 브라우저 (또는 Chrome) 는 외부 리소스를 무시할 것 같습니다.
나는 상술한 문제를 해결하고 당신의 SVG를 오프라인으로 볼 때도 똑같이 보일 수 있는 프리페치 SVG라고 불리는 기술을 발명했습니다!
아이디어는 가져오고 있는 내용으로 바꾸는 것이다 .데이터 URL로 모든 것을 대체합니다<img>.나는 이 점을 실현하기 위해 라이브러리를 만들었다. @import.
프리페치 없음

Since you might have the font-family installed locally, I explicitly removed the @import to demonstrate.

@import
프리페치 포함
prefetch-svg

그렇습니다.

이렇게다음은 SVG에 대한 나의 약간의 공유입니다.너의 생각을 나에게 말해라!내가 뭘 놓쳤나?