SVGネタ画像集

objectタグだと外部ファイルでも画像埋め込みが表示可能

画像にあわせて手書きSVG作成用

画像ファイルのドラッグ＆ドロップで画像変更可能

view source

JavaScript

$(function(){
  var objects = [
'sample-ani-neta-kiss.svg',
'sample-ani-neta-nyarin.svg',
'sample-ani-neta-prpr.svg',
'sample-ani-neta-zayaku.svg',
'sample-ani-neta-masuo.svg',
'sample-ani-neta-buri-rev.svg',
'sample-ani-neta-buri.svg',
'sample-ani-neta-kinoko.svg',
'sample-ani-neta-tikuwa.svg',
'sample-ani-neta-nuo.svg',
'sample-ani-neta-hako-yen.svg',
'sample-ani-neta-hako-mukade.svg',
'sample-ani-neta-hako-foot.svg',
'sample-ani-neta-hako-blood.svg',
'sample-ani-neta-hako.svg',
'sample-ani-neta-shake.svg',
'sample-ani-neta-hitsuji.svg',
'sample-ani-neta-takao.svg',
'sample-ani-neta-yukigoto.svg',
'sample-ani-neta-tono.svg', 
'sample-ani-neta-kiyoharu.svg',
'sample-ani-neta-hole.svg',
'sample-ani-neta-slideX-zubon.svg',
'sample-ani-neta-slideY-hand.svg',
'sample-ani-neta-slideY.svg',
'sample-ani-neta-takao-tikuwa.svg',
'sample-ani-neta-takao-face.svg',
'sample-ani-neta-nadu-henan.svg',
  ];

  var parent = $('#objects');
  objects.forEach(function(v){
    var li = $('<li>');
    var obj = $('<object>').attr({
type:"image/svg+xml",
width:400,
height:400,
data:v,
    });
    var a = $('<a>').text(v).attr({href:v});
    li.append(obj);
    li.append(a);
    parent.append(li);
  });
});



// HTML5 ドラッグ＆ドロップで取得
(function(){
  'use strict';
  var ele = document.getElementById('canvas');
  ele.classList.add('ready');
  ele.ondragstart = function(event){
    event.dataTranfer.addElement(container);
  }
  ele.ondragover = function(event){
    event.preventDefault();
    this.classList.add('drag');
  }
  ele.ondragleave = function(event){
    event.preventDefault();
    this.classList.remove('drag');
  }
  ele.ondrop = function(event){
    event.preventDefault();
    this.classList.remove('drag');
    console.log(event.dataTransfer.files);
    if(!event.dataTransfer.files.length){
      return;
    }
    var file = event.dataTransfer.files[0];
    console.log(file);
 
    var reader = new FileReader();
    reader.readAsDataURL(file)
 
    reader.onload = function(){
      var dataURL = reader.result;
      console.log(dataURL);
      //document.getElementById('base64').textContent = dataURL;
      //document.getElementById('img_url').setAttribute('value', file.name);
      document.getElementById('sampleImage').setAttribute('src', dataURL);
      //var w = document.getElementById('img').naturalWidth;
      //var h = document.getElementById('img').naturalHeight;
      //document.getElementById('size').textContent = w  +'x' + h;
    }
  }
})();

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-neta/svg-neta-img-object/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。