Adobe Illustrator에서 만든 SVG의 어느 부분을 삭제해도 안전합니까?

Question

아시다시피,이 코드의 대부분은 create ai 양식입니다. 일부 코드는 유용하지 않을 수 있으며 삭제해야한다고 생각합니다.

<svg height="80" width="80" version="1.1" id="icon-user" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" fill="#434343"> 
     <path id="XMLID_1_" class="st0" d="M24,24H0c0,0,1.3-5.3,7.2-7.3C8.6,17.5,10.2,18,12,18s3.4-0.5,4.8-1.3C22.7,18.7,24,24,24,24z 
      M20,8c0,4.4-3.6,8-8,8s-8-3.6-8-8s3.6-8,8-8S20,3.6,20,8z M17.2,11H6.8c1,1.8,3,3,5.2,3S16.2,12.8,17.2,11z"/> 
     </svg> 

Answer 1

일러스트 레이터가 필요하지 않은 물건을 많이 추가합니다.

귀하의 예제에서 삭제할 수 있습니다

그룹 1

• x="0px" y="0px" 다음은 루트 레벨
• style="enable-background:new 0 0 24 24;" 당신이 필터를 사용하지 않기 때문에 필요 전혀 의미가 없습니다. 어쨌든 enable-background은 안정적으로 지원되지 않습니다.
• xml:space="preserve". 텍스트 요소를 사용하지 않으므로
• xmlns:xlink="http://www.w3.org/1999/xlink"입니다. xlink 특성을 사용하지 않기 때문입니다.

그룹 2는 CSS와 SVG를 스타일링, 또는 JS으로 조작하지 않는 경우

, 당신은 또한 제거 할 수 있습니다

• id="icon-user"
• id="XMLID_1_"
• class="st0"

그룹 3

당신이 당신의 HTML 코드에서이 SVG 인라인을 삽입하는 경우. 예를 들어 :

<div> 
    <svg>...</svg> 
</div> 

는 또한 제거 할 수 있습니다 : 당신은 인라인 SVG에 필요한 최소한의 내용을 의미

• version="1.1"
• xmlns="http://www.w3.org/2000/svg"는

입니다 :

<svg height="80" width="80" viewBox="0 0 24 24" fill="#434343"> 
 
    <path d="M24,24H0c0,0,1.3-5.3,7.2-7.3C8.6,17.5,10.2,18,12,18s3.4-0.5,4.8-1.3C22.7,18.7,24,24,24,24z 
 
      M20,8c0,4.4-3.6,8-8,8s-8-3.6-8-8s3.6-8,8-8S20,3.6,20,8z M17.2,11H6.8c1,1.8,3,3,5.2,3S16.2,12.8,17.2,11z"/> 
 
</svg>

외부 SVG

외부 파일로 SVG를 사용하는 경우. 예를 들어, <img>, background-image, <object> 또는 <embed>으로 연결하는 경우 그룹 1과 그룹 2에 나열된 항목을 안전하게 제거 할 수 있습니다. 그러나 그룹 3의 항목은 제거하지 마십시오.

<svg height="80" width="80" version="1.1" id="icon-user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#434343"> 
     <path id="XMLID_1_" class="st0" d="M24,24H0c0,0,1.3-5.3,7.2-7.3C8.6,17.5,10.2,18,12,18s3.4-0.5,4.8-1.3C22.7,18.7,24,24,24,24z 
      M20,8c0,4.4-3.6,8-8,8s-8-3.6-8-8s3.6-8,8-8S20,3.6,20,8z M17.2,11H6.8c1,1.8,3,3,5.2,3S16.2,12.8,17.2,11z"/> 
</svg>