Firejune

푸하하! 결국에는 SVG 로고를 홈페이지에 적용했습니다. 위 화면은 적용후 파이어폭스 5에서 300% 확대하여 캡쳐한 화면입니다. SVG지원 여부를 판단하기 위한 스크립트를 서너개 찾았는데 그 중에서도 애플에서 사용한 스크립트가 가장 효용성이 좋기 때문에 이를 참조했습니다. 이미지 요소를 생성하여 src에 Data URI를 대입하고 응답여부로 사용가능 여부를 판단하는 원리입니다. 그렇기 때문에 callback을 받아 비동기식으로 결과를 처리해야하며, 응답속도는 onload 발생 시점으로 느리게 반응한다는 단점이 있습니다. 한번만 수행하면 다음 호출 부터는 동기식으로 사용여부를 반환합니다. 예전에 시도했던 방법과 원리는 같은데 왠지 더 좋아 보이네요.

/**
 * detect SVG support in browser
 *
 * @param {Function} callback for detecting SVG support
 * @return {Boolean} SVG supported
 *
 */
detectSVG.support = null;
function detectSVG(callback) {
  if (detectSVG.support === null) {
    var img = document.createElement("img")
      , onload = function () {
      detectSVG.support = true;
      if (typeof(callback) == "function") callback();
    };

    img.setAttribute("src", "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D");
    if (img.complete) {
      img.style.visibility = "hidden";
      img.style.position = "absolute";
      document.body.appendChild(img);
      window.setTimeout(function() {
        detectSVG.support = false;
        document.body.removeChild(img);
        if (img.width >= 100) onload();
      }, 1);
    } else {
      detectSVG.support = false;
      img.onload = onload;
    }
  } else if (detectSVG.support && typeof(callback) == "function") callback();

  return detectSVG.support;
}