2016-07-14 3 views
0

CSS 내에서 내 SVG 이미지에 데이터 URI를 사용하려고합니다. 기본 접근법은 전체 데이터 URI를 =으로 설정하고 css 클래스의 background 속성 값을 설정하는 것입니다.URI를 통한 SVG 인라인

.bg { 
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); 
} 

내 질문은 : 나는 별도의 파일로 데이터 URI 값을 휴식, 내 CSS 클래스 내에서 파일을 참조 할 수있는 방법. 목표 : css를 엄청나게 길게 만들지 않도록 모든 데이터 URI를 기본 스타일에서 분리합니다.

URI를 사용하여 SVG를 구현 한 적이 한번도 없었으므로 누구든지 에개의 아이디어를 공개 할 수 있습니다. SVG의 URI를 구현할 수 있습니다. 무리 감사! :)

P.S. 이것을 자동화하는 좋은 방법이 있다면, 나는이 프로젝트에 꿀꺽 꿀꺽 마시고 부트 스트랩을 사용하고있다.

+1

데이터 uri를 파일로 저장 한 다음 참조하십시오. 물론 그것은 더 이상 그 시점의 데이터 URI는 아니며 단순한 URI입니다. –

+0

이것은 매우 기본이지만 파일을 어떻게 참조 할 것입니까? 파일에 어떤 확장명을 지정 하시겠습니까? 어떻게 내가 그 파일 안에 단지 하나의 SVG를 참조 할 수 있을까요? –

+0

어디에 넣을까요? 명백한 확장은 .svg가 될 것입니다. 나는 마지막 질문을 정말로 이해하지 못한다. –

답변

1

필자는 cunt 클래스를 생성하는 grunt-grunticon을 선호하는데, 필요하다면 png로 폴백해야한다. 그런 다음 scss 나 sass를 사용하여 아이콘을 @extend하는 방법으로 사용할 수 있습니다. 예를 들어 @extend .icon-undo;

희망이 있습니다. 행운을 빕니다.

관련 문제