search

vulcan9 / jikji.editor

jik-ji 프로젝트 관리
Other
0 stars 0 forks source link

배경 이미지 삽입 옵션 테스트 #208

Open vulcan9 opened 4 years ago

vulcan9 commented 4 years ago

배경 강제늘림 삽입하기

svg 이미지는 벡터 방식으로 viewBox, preserveAspectRatio 속성에 따라 svg요소의 위치와 크기가 달라집니다.
SVG 이미지를 삽입할때에는 아래 case1의 경우와 같이 픽셀 단위의 이미지의 크기만을 설정했을때 일반 이미지와 같은 결과를 예상할 수 있으니 참고 바랍니다. (SVG 레이아웃)

Image 파일 삽입

옵션 editor paper editor thumb publish paper publish thumb
강제늘림 (100%, 100%) 24v-inline-screen 24v-inline-screen 24v-inline-screen 24v-inline-screen

SVG 배경 삽입하기

샘플로 사용된 SVG 이미지

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0V0z" fill="none"/>
    <path d="M19 2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h4l3 3 3-3h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 16h-4.83l-.59.59L12 20.17l-1.59-1.59-.58-.58H5V4h14v14zm-8-3h2v2h-2zm1-8c1.1 0 2 .9 2 2 0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2z"/>
</svg>

svg 태그, 옵션 설정

SVG 삽입 옵션과 SVG 태그 설정에 따라 삽입 결과가 차이가 발생함

SVG 삽입 옵션
- in-line/embed: 저작툴의 SVG 적용 in-line 또는 embed 옵션 설정
- background: 저작툴의 SVG 적용 Background image 옵션 설정

SVG 태그 설정
- pixel size: <svg width="24" height="24">...</svg>
- percent size: <svg width="100%" height="100%">...</svg>
- viewBox: <svg ... viewBox="0 0 24 24">...</svg>
- preserveAspectRatio: <svg ... preserveAspectRatio="none">...</svg>

SVG Background image 삽입 + 강제늘림 옵션

SVG 태그 설정 editor paper editor thumb publish paper publish thumb
none 24-inline-thum 24-inline-thum 24-inline-thum 24v-inline-screen
정상 출력
width="24" height="24"		 24v-inline-screen 24v-inline-screen 24v-inline-screen 24v-inline-screen
width="24" height="24"
viewBox="0 0 24 24"		 24v-inline-screen 24v-inline-screen 24v-inline-screen 24v-inline-screen
정상 출력
width="24" height="24"
preserveAspectRatio="none"		 24v-inline-screen 24v-inline-screen 24v-inline-screen 24v-inline-screen
정상 출력
width="24" height="24"
viewBox="0 0 24 24"
preserveAspectRatio="none		 24v-inline-screen 24v-inline-screen 24v-inline-screen 24v-inline-screen
width="100%" height="100%" 24-inline-thum 24-inline-thum 24-inline-thum 24v-inline-screen
width="100%" height="100%"
viewBox="0 0 24 24"		 24v-inline-screen 24v-inline-screen 24v-inline-screen 24v-inline-screen
width="100%" height="100%"
preserveAspectRatio="none"		 24-inline-thum 24-inline-thum 24-inline-thum 24v-inline-screen
정상 출력
width="100%" height="100%"
viewBox="0 0 24 24"
preserveAspectRatio="none"		 24v-inline-screen 24v-inline-screen 24v-inline-screen 24v-inline-screen

SVG in-line 또는 embed 삽입

SVG 태그 설정 editor paper editor thumb publish paper publish thumb
none 24-inline-thum 24-inline-thum 24-inline-thum 100-inline-thum
원본 크기로 보여짐
width="24" height="24"		 24-inline-thum 24-inline-thum 24-inline-thum 24-inline-thum
원본 크기로 보여짐
width="24" height="24"
viewBox="0 0 24 24"		 24-inline-thum 24-inline-thum 24-inline-thum 24-inline-thum
원본 크기로 보여짐
width="24" height="24"
preserveAspectRatio="none"		 24-inline-thum 24-inline-thum 24-inline-thum 24-inline-thum
원본 크기로 보여짐
width="24" height="24"
viewBox="0 0 24 24" preserveAspectRatio="none"		 24-inline-thum 24-inline-thum 24-inline-thum 24-inline-thum
width="100%" height="100%" 24-inline-thum 24-inline-thum 24-inline-thum 100-inline-thum
화면에 꽉찬 크기로 보여짐
width="100%" height="100%"
viewBox="0 0 24 24"		 100p-inline-thum 100p-inline-thum 100p-inline-thum 100p-inline-thum
width="100%" height="100%"
preserveAspectRatio="none"		 24-inline-thum 24-inline-thum 24-inline-thum 0000
width="100%" height="100%"
viewBox="0 0 24 24"
preserveAspectRatio="none"		 24v-inline-screen 0000 100p-inline-thum 0000