카테고리

질문 & 답변
세부 분야

웹 개발
해결 여부

미해결

같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?

22.02.13 18:53 작성 조회수 161

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 
- 먼저 유사한 질문이 있었는지 검색해보세요. 
- 서로 예의를 지키며 존중하는 문화를 만들어가요. 
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요.

한 페이지 안에 동일한 svg 아이콘을 여러개 사용하고자 할 때, 그라디언트 스타일 등 동일한 디자인이 들어가면 id값을 똑같이 사용해도 되는지, 아니면 다 다르게 줘야 하는지 궁금합니다.

예를 들어, 아래 예시 코드처럼 아무개와 홍길동의 인스타그램 링크를 연결하고 동일한 인스타그램 아이콘을 svg로 붙이고 싶습니다.

이때 인스타그램 아이콘을 아무개와 홍길동 각각에 svg 코드를 가져와서 그냥 붙이면, <radialGradient>에 "a"라는 동일한 id 값이 생성됩니다. 

그럼 한 페이지에 id="a"는 두 번 선언 됩니다.

이럴 경우, 인스타그램 아이콘 id값을 전부 다르게 변경해야 하나요?

(예시 코드가 너무 길어 죄송합니다.. 인스타그램 아이콘을 들고왔더니 말씀주신대로 압축을 했는데도 코드가 복잡하네요ㅠㅠ)

<!-- 아무개 인스타그램 링크 -->
<a href="/">
  <svg class="instagram1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65.23" height="65.23">
    <defs>
      <radialGradient id="a" cx="-1.129" cy="4.694" r="7.676" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="#ffd879"/>
        <stop offset=".1" stop-color="#ffd879"/>
        <stop offset=".15" stop-color="#fccb76"/>
        <stop offset=".26" stop-color="#f5aa6c"/>
        <stop offset=".4" stop-color="#e9755e"/>
        <stop offset=".45" stop-color="#e45f58"/>
        <stop offset=".68" stop-color="#d22a9c"/>
        <stop offset="1" stop-color="#6968df"/>
      </radialGradient>
      <radialGradient id="d" cx="-.097" cy="2.149" r="2.993" xlink:href="#a"/>
      <radialGradient id="f" cx=".222" cy="1.228" r="1.325" xlink:href="#a"/>
      <clipPath id="b">
        <path data-name="패스 490" d="M27.49 32.67a5.59 5.59 0 1 0 11.18.02v-.01a5.589 5.589 0 0 0-5.58-5.59h-.01a5.59 5.59 0 0 0-5.59 5.58" fill="none"/>
      </clipPath>
      <clipPath id="c">
        <path data-name="패스 491" d="M23.79 32.72a9.29 9.29 0 1 1 18.58-.02v.02A9.289 9.289 0 0 1 33.09 42h-.01a9.289 9.289 0 0 1-9.29-9.28m15.58-9.43a2.36 2.36 0 1 1 2.36 2.32v.04a2.36 2.36 0 0 1-2.36-2.36m-1.29-4.92H27.15a8.78 8.78 0 0 0-8.78 8.78v10.93a8.78 8.78 0 0 0 8.78 8.78h10.93a8.77 8.77 0 0 0 8.77-8.77V27.15a8.769 8.769 0 0 0-8.76-8.78h-.01" fill="none"/>
      </clipPath>
      <clipPath id="e">
        <path data-name="패스 492" d="M15 39.38V25.85A10.86 10.86 0 0 1 25.85 15h13.53a10.86 10.86 0 0 1 10.86 10.85v13.53a10.86 10.86 0 0 1-10.86 10.86H25.85A10.86 10.86 0 0 1 15 39.38M13.4 0A13.4 13.4 0 0 0 0 13.4v38.43a13.4 13.4 0 0 0 13.4 13.4h38.43a13.4 13.4 0 0 0 13.4-13.4V13.4A13.4 13.4 0 0 0 51.83 0Z" fill="none"/>
      </clipPath>
    </defs>
    <g data-name="그룹 82">
      <g data-name="그룹 81" clip-path="url(#b)">
      <path data-name="사각형 125" transform="translate(27.484 27.09)" fill="url(#a)" d="M0 0h11.186v11.186H0z"/>
    </g>
    </g>
      <g data-name="그룹 84">
        <g data-name="그룹 83" clip-path="url(#c)">
        <path data-name="사각형 126" transform="translate(18.37 18.37)" fill="url(#d)" d="M0 0h28.486v28.49H0z"/>
      </g>
    </g>
      <g data-name="그룹 86">
        <g data-name="그룹 85" clip-path="url(#e)">
        <path data-name="사각형 127" fill="url(#f)" d="M0 0h65.23v65.23H0z"/>
      </g>
    </g>
  </svg>
  <p>아무개</p>
</a>
<!-- 아무개 인스타그램 링크 //-->

<!-- 홍길동 인스타그램 링크 -->
<a href="/">
  <svg class="instagram2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65.23" height="65.23">
    <defs>
      <radialGradient id="a" cx="-1.129" cy="4.694" r="7.676" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="#ffd879"/>
        <stop offset=".1" stop-color="#ffd879"/>
        <stop offset=".15" stop-color="#fccb76"/>
        <stop offset=".26" stop-color="#f5aa6c"/>
        <stop offset=".4" stop-color="#e9755e"/>
        <stop offset=".45" stop-color="#e45f58"/>
        <stop offset=".68" stop-color="#d22a9c"/>
        <stop offset="1" stop-color="#6968df"/>
      </radialGradient>
      <radialGradient id="d" cx="-.097" cy="2.149" r="2.993" xlink:href="#a"/>
      <radialGradient id="f" cx=".222" cy="1.228" r="1.325" xlink:href="#a"/>
      <clipPath id="b">
        <path data-name="패스 490" d="M27.49 32.67a5.59 5.59 0 1 0 11.18.02v-.01a5.589 5.589 0 0 0-5.58-5.59h-.01a5.59 5.59 0 0 0-5.59 5.58" fill="none"/>
      </clipPath>
      <clipPath id="c">
        <path data-name="패스 491" d="M23.79 32.72a9.29 9.29 0 1 1 18.58-.02v.02A9.289 9.289 0 0 1 33.09 42h-.01a9.289 9.289 0 0 1-9.29-9.28m15.58-9.43a2.36 2.36 0 1 1 2.36 2.32v.04a2.36 2.36 0 0 1-2.36-2.36m-1.29-4.92H27.15a8.78 8.78 0 0 0-8.78 8.78v10.93a8.78 8.78 0 0 0 8.78 8.78h10.93a8.77 8.77 0 0 0 8.77-8.77V27.15a8.769 8.769 0 0 0-8.76-8.78h-.01" fill="none"/>
      </clipPath>
      <clipPath id="e">
        <path data-name="패스 492" d="M15 39.38V25.85A10.86 10.86 0 0 1 25.85 15h13.53a10.86 10.86 0 0 1 10.86 10.85v13.53a10.86 10.86 0 0 1-10.86 10.86H25.85A10.86 10.86 0 0 1 15 39.38M13.4 0A13.4 13.4 0 0 0 0 13.4v38.43a13.4 13.4 0 0 0 13.4 13.4h38.43a13.4 13.4 0 0 0 13.4-13.4V13.4A13.4 13.4 0 0 0 51.83 0Z" fill="none"/>
      </clipPath>
    </defs>
    <g data-name="그룹 82">
      <g data-name="그룹 81" clip-path="url(#b)">
      <path data-name="사각형 125" transform="translate(27.484 27.09)" fill="url(#a)" d="M0 0h11.186v11.186H0z"/>
    </g>
    </g>
      <g data-name="그룹 84">
        <g data-name="그룹 83" clip-path="url(#c)">
        <path data-name="사각형 126" transform="translate(18.37 18.37)" fill="url(#d)" d="M0 0h28.486v28.49H0z"/>
      </g>
    </g>
      <g data-name="그룹 86">
        <g data-name="그룹 85" clip-path="url(#e)">
        <path data-name="사각형 127" fill="url(#f)" d="M0 0h65.23v65.23H0z"/>
      </g>
    </g>
  </svg>
  <p>홍길동</p>
</a>
<!-- 홍길동 인스타그램 링크 //-->