AWS SimpleIconのSVGを有効活用

最終目的

AWSのSimpleIconを有効活用してAWSアイコンクイズでも作成する
今回はAWSから配られているファイルフォーマットのSVGを利用すべく
以前から気になっていた AdobeのSnap.svg を利用してみました。
http://snapsvg.io/

とりあえず表示してみたという所で、右下の本日のAWSサービスしかお見せ出来ませんが
引き続き綴って行きます。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Quiz AWS SimpleIcon</title>
</head>
<body>
<svg id="svg" width="150px" height="150px"></svg>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/quiz.js"></script>
</html>
    function showIcon(answerNum)
    {
        var s = Snap("#svg");
        var g = s.group();
        var simpleLogo = Snap.load(img_path + img[answerNum], function ( loadedFragment ) {
            g.append(loadedFragment);
        });
    }

    function showSelection(answerNum)
    {
        var s = Snap("#svg");
        var g = s.group();
        g.text(0, 110, "今日のAWSサービス");
        g.text(20, 130, img[answerNum].replace('.svg', ''));
    }

投稿者プロフィール

takashi
Japan AWS Ambassadors 2023-
開発会社での ASP型WEBサービス企画 / 開発 / サーバ運用 を経て
2010年よりスカイアーチネットワークスに在籍しております

機械化/効率化/システム構築を軸に人に喜んで頂ける物作りが大好きです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

ABOUTこの記事をかいた人

Japan AWS Ambassadors 2023- 開発会社での ASP型WEBサービス企画 / 開発 / サーバ運用 を経て 2010年よりスカイアーチネットワークスに在籍しております 機械化/効率化/システム構築を軸に人に喜んで頂ける物作りが大好きです。