SVG를 마치 CSS처럼 활용하기

선택과집중

· 2025-07-17 (목) 16:43:32 · 조회 1311 1311

SVG를 왜 써야 하나요?
- 해상도에 영향을 받지 않음 (Retina 대응)
- 아이콘, 로고, 애니메이션에서 가볍고 선명함
- CSS, JavaScript로 동적으로 제어 가능

SVG 삽입 3가지 방식
- <img src="icon.svg"> : 단순 이미지 대체 (제어 불가)
- background-image: url('icon.svg') : CSS에서 사용 (제어 불가)
- inline SVG 사용(추천): SVG 태그를 직접 HTML에 삽입하면 CSS 제어 가능!

inline SVG 예시
<svg class="icon" width="24" height="24" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" stroke="gray" stroke-width="2" fill="white" />
</svg>

댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+ + 글쓰기

분류	제목	글쓴이	날짜	조회
CSS	[CSS] 검색 엔진과 스크린 리더를 위한 숨김 텍스트 [1]	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-12-27	조회 791
CSS	[CSS] 스크롤 성능을 극적으로 개선하는 레이아웃 리플로우 최소화	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-12-17	조회 571
CSS	[CSS] CSS :has()를 활용한 “부모 기반 상태 제어(Parent State Control)”로 자바스크립트 의존도 줄이기	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-12-07	조회 697
CSS	[CSS] Container Query로 컴포넌트 단위 반응형 만들기	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-11-20	조회 621
CSS	[CSS] 실무에서 바로 쓰는 “레이아웃 구조 최적화(자동 확장형 UI) [1]	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-11-15	조회 697
기타	[기타] 이미지 최적화 (WebP/AVIF & Lazy Loading)	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-09-21	조회 823
CSS	[CSS] 고급 레이아웃(Grid + Flex 혼합 활용)	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-09-09	조회 1,085
CSS	[CSS] CSS 애니메이션 고급 활용	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-09-05	조회 1,085
CSS	[CSS] 픽셀 단위 고정 대신 유연한 단위를 쓰자 [1]	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-08-16	조회 1,131
기타	[기타] 트러블슈팅 & 품질 관리 중심	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-07-23	조회 981
CSS	[CSS] SVG를 마치 CSS처럼 활용하기	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-07-17	조회 1,312
CSS	[CSS] 웹폰트 로딩 최적화 [3]	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-06-27	조회 1,232
CSS	[CSS] 다크 모드(Dark Mode) 지원을 위한 CSS 전략 [1]	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-06-12	조회 1,263
CSS	[CSS] CSS revert 키워드로 손쉽게 스타일 초기화하기 [1]	선택과집중 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-06-09	조회 1,202
CSS	[CSS] 알러트 모양( 삼각 판넬 안에 느낌표 ) css와 dom으로 만들기	예뜨락 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-06-07	조회 1,009
	이미지 갤러리 (직)제작 소스	잠실삼촌 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-01-30	조회 1,180
HTML	[HTML] bootstrap4 grid-item 책갈피 표시	하얀감자 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	25-01-23	조회 1,437
CSS	[CSS] clamp를 사용하는 경우에 대해서 여쭈어 봅니다. [2]	7reemoon 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	24-10-21	조회 1,341
	파일 입력필드 숨기고 아이콘(폰트어썸)으로 대체	탈퇴회원 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	23-12-10	조회 1,834
HTML	[HTML] textContent는 MOZ의 MDN에서 XSS해킹이 않된다 그러나 다중은 않되요 그러나 해결과 해결할 일	piadream 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	24-02-12	조회 1,279
CSS	[CSS] Div 를 프레임으로 잡기 tested by w3schools.com	piadream 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	24-02-11	조회 1,582
CSS	[CSS] 기본적인 CSS 사용 태그 [ Site on Base Default - Custom Free ]	piadream 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	24-01-28	조회 1,526
HTML	[HTML] 마우스 클릭시 효과음 나오고 마우스에 서클 퍼지는 효과 재미 있네요..	설국열차 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	23-11-05	조회 2,270
기타	[기타] 나리야빌더 사용중 페이징중에 바로 이전이나 다음 페이지가 동작이 안되는증상 해결	정후이 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	23-10-21	조회 1,518
CSS	[CSS] 스와이퍼 페이징 커스텀 방법 어떻게 하나요...?? [3]	김성래yo 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	23-09-04	조회 2,103
HTML	[HTML] input의 팁	piadream 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	23-07-13	조회 1,926
CSS	[CSS] css 애니메이션 눈 떨어지는 레이아웃(스킨인데 못올리게 해서 여기에다...)	탈퇴회원 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	23-06-14	조회 1,825
	상업이용 가능한 디자인소스(html, css) 완성 코딩 소스입니다. [16]	샤이닝 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	23-05-04	조회 4,227
	<div>을 iframe처럼 만들기 [5]	천사의눈 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	23-05-03	조회 5,982
	radio 버튼 클릭하면 input text 값 넘겨주기 [6]	취뉴비 프로필 보기 게시판 작성글 보기 전체 작성글 보기 전체 댓글 보기	23-06-01	조회 2,242

글쓰기