h1 Pixels to SVG via Canvas h1 p Need a pixel perfect scalable image but all you have is a low res GIF You could use a href https css tricks com almanac properties i image rendering target _blank code image rendering pixelated code a and hope the browser will scale it right or you could use this tool to convert a raster image to SVG p p Each color is merged into one code path code optimized for combining horizontal runs where possible to keep file size down Works best with 8 bit images or graphics where colors are limited and the dimensions are relatively small Large or complex images may lock the browser p div class choices input type file id upload button id test or try with a test image img src data image png base64 iVBORw0KGgoAAAANSUhEUgAAAA4AAAASCAMAAABcgh8DAAAADFBMVEUAAAD MRjGYwD lFpY2Im6AAAAAXRSTlMAQObYZgAAAExJREFUeNptzgkKwCAQQ1Enuf dm8wYbIsfF56CuC6VO0pDACS4tij1DN8WLLUmTltA Spq5gSmwphEsTRANgXHphXnz7Pk5e929l8Pl0sBHu8kwiYAAAAASUVORK5CYII id testImage button div label input type checkbox id includeDimensions Include width height on SVG small viewBox will always be included but omitting the width height allows the SVG to scale small label div id output div pre contentEditable true id outputRaw pre div class inspired em Inspired by a href https github com meyerweb px2svg px2svg a em div svg xmlns http www w3 org 2000 svg viewBox 0 0 35 18 shape rendering crispEdges rect width 1 height 1 x 0 y 6 fill rgb 232 238 247 rect width 20 height 1 x 1 y 6 fill rgb 255 0 0 path fill rgb 0 255 0 d M0 0 h0 v1 h1 v 1z path fill rgb 0 255 0 d M1 1 h0 v1 h1 v 1z svg style body padding 1em padding bottom 2em max width 35em margin auto font size 14px line height 1 4 min height 1300px img vertical align middle button background ddd border none appearance none button input type file padding 0 5em cursor pointer svg label input type file display block margin 1em auto text align center label small display block svg max width 100 choices background eee display flex align items stretch choices flex 1 1 50 outputSize display block text align center margin 0 5em font size 0 8em outputRaw display block width 100 background eee white space pre wrap padding 0 5em font size 0 75em inspired position fixed bottom 0 padding 0 5em width 100 background FFF background rgba 255 255 255 0 8 style script console clear function each obj callback var length obj length likeArray length 0 length 0 length 1 in obj i 0 if likeArray for i length i if callback call obj i i obj i false break else for i in obj if callback call obj i i obj i false break function byteCount s return encodeURI s split length 1 function componentToHex c var hex c toString 16 return hex length 1 0 hex hex function getColor r g b a if a undefined a 255 return componentToHex r componentToHex g componentToHex b if a 0 return false return rgba r g b a function makePathData x y w return M x y h0v1h w v 1z function path color data return path fill color d data var canvas document createElement canvas var ctx canvas getContext 2d document body appendChild canvas var uploader document getElementById upload var includeDimensions document getElementById includeDimensions var outputDiv document getElementById output var outputRaw document getElementById outputRaw function processImage src var img new Image img onload function var width img width var height img height canvas width width canvas height height ctx drawImage img 0 0 var output svg xmlns http www w3 org 2000 svg viewBox 0 0 width height shape rendering crispEdges if includeDimensions checked output width width height height output n var colors x 0 y 0 p color for y 0 y height y for x 0 x width x p ctx getImageData x y 1 1 data color getColor p 0 p 1 p 2 p 3 if color colors color colors color colors color push x y colors color push makePathData c r 1 each colors function i value if i false return var paths var curPath var w 1 each value function if curPath this 1 curPath 1 this 0 curPath 0 w w else if curPath paths push makePathData curPath 0 curPath 1 w w 1 curPath this paths push makePathData curPath 0 curPath 1 w Finish last path this paths paths output path i paths join output n svg outputDiv innerHTML output em class outputSize Output size in bytes byteCount output em outputRaw innerHTML output replace g lt replace g gt img src src target src target result src function loadImage e var reader new FileReader reader onload processImage file e target files uploader files 0 if file reader readAsDataURL file includeDimensions onchange uploader onchange loadImage var test document getElementById test var testImage document getElementById testImage test onclick function processImage testImage src script
break function byteCount s return encodeURI s split length 1 function componentToHex c var hex c toString 16 return hex length 1 0 hex hex function getColor r g b a if a undefined a 255 return componentToHex r componentToHex g componentToHex b if a 0 return false return rgba r g b a function makePathData x y w return M x y h0v1h w v 1z function path color data return path fill color d data var canvas document createElement canvas var ctx canvas getContext 2d document body appendChild canvas var uploader document getElementById upload var includeDimensions document getElementById includeDimensions var outputDiv document getElementById output var outputRaw document getElementById outputRaw function processImage src var img new Image img onload function var width img width var height img height canvas width width canvas height height ctx drawImage img 0 0 var output svg xmlns http www w3 org 2000 svg viewBox 0 0 width height shape rendering crispEdges if includeDimensions checked output width width height height output n var colors x 0 y 0 p color for y 0 y height y for x 0 x width x p ctx getImageData x y 1 1 data color getColor p 0 p 1 p 2 p 3 if color colors color colors color colors color push x y colors color push makePathData c r 1 each colors function i value if i false return var paths var curPath var w 1 each value function if curPath this 1 curPath 1 this 0 curPath 0 w w else if curPath paths push makePathData curPath 0 curPath 1 w w 1 curPath this paths push makePathData curPath 0 curPath 1 w Finish last path this paths paths output path i paths join output n svg outputDiv innerHTML output em class outputSize Output size in bytes byteCount output em outputRaw innerHTML output replace g lt replace g gt img src src target src target result src function loadImage e var reader new FileReader reader onload processImage file e target files uploader files 0 if file reader readAsDataURL file includeDimensions onchange uploader onchange loadImage var test document getElementById test var testImage document getElementById testImage test onclick function processImage testImage src script