html5 logo

게시자: 대문 demun 카테고리: 퍼블리셔/html 2011.11.29 06:00
html5의 로고에 대해서 이야기 한적이 있는데요. w3.org에서 로고를 배포하고 있습니다.
자세한것은 홈페이지를 참고해주시기 바랍니다.

뭐 티셔츠도 있고 이미지와 기타 다른 마크도 있습니다.
홈페이지에 붙여넣을수 있게 배포를 하고 있습니다.
기타 다른 자료도 있으니 참고해보시기 바랍니다.

블로그에 svg를 이용해서 넣어봤습니다.
역시나 잘 되는군요. 현재 저는 크롬에서 보고 있습니다. 

마크와 워드마크가 포함된 코드는 아래에 있습니다.
코드는 아래와 같습니다.
물론 홈페이지에서 보시면 똑같습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <title>HTML5 Logo Badge</title>
  <path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/>
  <path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/>
  <path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
  <path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
</svg>

HTML5 Logo

  홈페이지에 보면 검정색과 흰색도 있는데요. 검정색도 한번 넣어봤습니다. 
코드는 아래와 같습니다.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
    <g>
        <path fill="#231F20" d="M119.387,20.312h21.298v21.045h19.485V20.312h21.303v63.727H160.17V62.7h-19.485v21.338h-21.298V20.312z"/>
        <path fill="#231F20" d="M209.482,41.444h-18.754V20.312h58.812v21.133h-18.759v42.594h-21.3V41.444z"/>
        <path fill="#231F20" d="M258.879,20.312h22.21l13.661,22.392l13.648-22.392h22.219v63.727h-21.212V52.453L294.75,75.111h-0.366    l-14.665-22.658v31.585h-20.84V20.312z"/>
        <path fill="#231F20" d="M341.219,20.312h21.308v42.664h29.955v21.062h-51.263V20.312z"/>
    </g>
    <path fill="#231F20" d="M200.662,266.676H256v-42.92h-59.169L200.662,266.676z M88.686,111.982l30.47,341.74l136.762,37.966   l136.891-37.948l30.507-341.758H88.686z M366.694,431.981L256,462.668v-43.494l-0.067,0.02l-85.858-23.835l-6.004-67.298h42.075   l3.116,34.914l46.68,12.607l0.059-0.019V308.59h-93.669l-11.306-126.749H256v-41.914h136.766L366.694,431.981z"/>
    <path opacity="0.8" fill="#231F20" d="M307.592,308.59H256v66.974l46.728-12.613L307.592,308.59z M256,139.927v41.914h104.975   l-3.754,41.915H256v42.92h97.406l-11.499,128.683L256,419.174v43.494l110.694-30.687l26.071-292.055H256z"/>
    <g opacity="0.2">
        <polygon fill="#231F20" points="256,181.841 151.025,181.841 162.331,308.59 256,308.59 256,266.676 200.662,266.676     196.831,223.756 256,223.756   "/>
        <polygon fill="#231F20" points="256,375.563 255.941,375.582 209.262,362.975 206.146,328.061 164.07,328.061 170.074,395.358     255.933,419.193 256,419.174   "/>
    </g>
</g>
</svg>

댓글