图片转换SVG网页HTML源码,只是把位图包装成了矢量图的格式。直接把位图的每个像素塞进去svg,这样生成的放大后会样糊。

完整代码:

code<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8">
  <title>SVG图片生成器</title>
    <style>    
    body {      
    display: flex;      
    justify-content: 
    center;      
    align-items: 
    center;      
    height: 100vh;     
    background-color: #f7f7f7;      
    font-family: Arial, 
    sans-serif;
        }
    .container 
    {      
    text-align: 
    center;
    padding: 20px;      
    background-color: #fff;      
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }    
 h1 
 {     
    margin-top: 0;
    }    
    input[type="file"] 
    {      
    margin-bottom: 10px;
    display: none;
    }    
    label 
    {      
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    }    
    .avatar 
    {      
    margin-top: 10px;
    max-width: 100%;      
    height: auto;    
    }    
    .download-button 
    {      
    margin-top: 10px;
    display: none;    
    }  
    </style>
    </head>
    <body>  
    <div class="container">
        <h1>SVG图片生成器</h1>    
        <label for="upload">选择图片</label>    
        <input id="upload" type="file" required accept="image/gif, image/jpeg, image/png">    
        <img class="avatar" src="" alt="Avatar Preview">    
        <a class="download-button" href="#" download="noavatar.svg">下载 SVG</a>
        </div>
        <script>
        document.getElementById('upload').addEventListener('change', function() {  
        var file = this.files[0];  
        if (file) {    
        var reader = new FileReader();    
        reader.readAsDataURL(file);    
        reader.addEventListener('load', function() {      
        var dataURL = this.result;      
        var svgCode = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120"><image xlink:href="'+dataURL+'" height="120" width="120"/></svg>';      
        var blob = new Blob([svgCode], {type: 'image/svg+xml'});      
        var url = URL.createObjectURL(blob);      
        document.querySelector('.avatar').src = url;      
        document.querySelector('.download-button').style.display = 'inline-block';      
        document.querySelector('.download-button').href = url;    
    });  
  }
});
</script>
</body>
</html>