SVG 확장자로 로고만들기

<svg width="160px" height="37px" viewBox="0 0 160 37" >

<text x="50%" text-anchor="middle" y="50%" dy="0.4em" fill="url(#ptn)" font-family="폰트이름" font-size="24px" letter-spacing= "0.15em">{$li->site_name} 로고타이틀을 불러오고나 직접 텍스트를 입력해도 된다.</text>

<defs>

<linearGradient id="grd" x1="0%" y1="0%" x2="100%" y2="0">

<stop offset="0%" style="stop-color:#33235b;"/>

<stop offset="25%" style="stop-color:#9485f5;"/>

<stop offset="50%" style="stop-color:#ffb7d6;"/>

<stop offset="75%" style="stop-color:#9485f5;"/>

<stop offset="100%" style="stop-color:#33235b;"/>

</linearGradient>

<pattern id="ptn" x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse">

<rect x="0" y="0" width="150%" height="100%" fill="url(#grd)">

<animate attributeType="XML"

attributeName="x"

from="0" to="150%"

dur="7s"

repeatCount="indefinite"/>

</rect>

<rect x="-150%" y="0" width="150%" height="100%" fill="url(#grd)">

<animate attributeType="XML"

attributeName="x"

from="-150%" to="0"

dur="7s"

repeatCount="indefinite"/>

</rect>

</pattern>

</defs>

</svg>