{"id":2059,"date":"2017-02-16T14:33:59","date_gmt":"2017-02-16T22:33:59","guid":{"rendered":"https:\/\/hellbach.us\/blog\/?p=2059"},"modified":"2022-11-24T14:34:34","modified_gmt":"2022-11-24T22:34:34","slug":"transparent-jpg-svg","status":"publish","type":"post","link":"https:\/\/hellbach.us\/blog\/tech\/dev\/transparent-jpg-svg\/","title":{"rendered":"Transparent JPG (With SVG)"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:330,&quot;href&quot;:&quot;https:\\\/\\\/css-tricks.com\\\/video-screencasts\\\/22-cutting-clipping-paths&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20231209064404\\\/https:\\\/\\\/css-tricks.com\\\/video-screencasts\\\/22-cutting-clipping-paths\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 19:55:58&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-05 10:06:04&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-28 02:16:01&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-08 18:50:18&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-23 05:54:57&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-23 05:54:57&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:331,&quot;href&quot;:&quot;https:\\\/\\\/css-tricks.com\\\/almanac\\\/properties\\\/c\\\/clip&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20190624214332\\\/https:\\\/\\\/css-tricks.com\\\/almanac\\\/properties\\\/c\\\/clip\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-01-05 10:06:04&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-28 02:16:01&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-08 18:50:19&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-23 05:54:58&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-23 05:54:58&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:332,&quot;href&quot;:&quot;https:\\\/\\\/css-tricks.com\\\/basic-shapes-path-never-twain-shall-meet&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20231202105957\\\/https:\\\/\\\/css-tricks.com\\\/basic-shapes-path-never-twain-shall-meet\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 19:56:07&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-05 10:06:03&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-28 02:16:01&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-08 18:50:18&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-23 05:54:57&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-23 05:54:57&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:333,&quot;href&quot;:&quot;https:\\\/\\\/css-tricks.com\\\/clipping-masking-css\\\/#article-header-id-5&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250916162951\\\/https:\\\/\\\/css-tricks.com\\\/clipping-masking-css\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 19:56:08&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-05 10:06:03&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-28 02:16:00&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-08 18:50:18&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-23 05:54:56&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-23 05:54:56&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:334,&quot;href&quot;:&quot;https:\\\/\\\/css-tricks.com\\\/automatic-image-optimization-hazel-imageoptim&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20240714201315\\\/https:\\\/\\\/css-tricks.com\\\/automatic-image-optimization-hazel-imageoptim\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 19:56:09&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-05 10:06:03&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-28 02:16:01&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-08 18:50:18&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-08 18:50:18&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:335,&quot;href&quot;:&quot;https:\\\/\\\/css-tricks.com\\\/transparent-jpg-svg&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20240616054734\\\/https:\\\/\\\/css-tricks.com\\\/transparent-jpg-svg\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 19:56:11&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-05 10:06:08&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-28 02:16:09&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-02-28 02:16:09&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>Let&#8217;s say you have a photographic image that really should be a JPG or WebP, for the best file size and quality. But what if I need transparency too? Don&#8217;t I need PNG for that? Won&#8217;t that make for either huge file sizes (PNG-24) or weird quality (PNG-8)? Let&#8217;s look at another way that ends up best-of-both-worlds.<\/p>\n<figure id=\"post-251558\" class=\"align-none media-251558 can-be-enlarged\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20170218025513\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg\" sizes=\"(min-width: 1654px) 900px, (min-width: 64em) calc( 56vw ), 100vw\" srcset=\"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg 1378w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig-300x212.jpg 300w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig-768x542.jpg 768w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig-1024x722.jpg 1024w\" alt=\"\" \/><figcaption>The original photographic image.<\/figcaption><\/figure>\n<p>The goal is to clip myself out of the image, removing the background. My technique for that is usually to use Photoshop and <a href=\"https:\/\/css-tricks.com\/video-screencasts\/22-cutting-clipping-paths\/\">cut a clipping path manually<\/a> with the Pen tool.<\/p>\n<figure id=\"post-251559\" class=\"align-none media-251559 can-be-enlarged\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20170218025515\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/clip-path.jpg\" sizes=\"(min-width: 1654px) 900px, (min-width: 64em) calc( 56vw ), 100vw\" srcset=\"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/clip-path.jpg 1020w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/clip-path-300x279.jpg 300w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/clip-path-768x715.jpg 768w\" alt=\"\" \/><\/figure>\n<p>Now I can select the inverse of that clipping path to easily remove the background.<\/p>\n<p>Attempting to save this as a 1200px wide image as PNG-24 out of Photoshop ends up as about a 1MB image!<\/p>\n<figure id=\"post-251560\" class=\"align-none media-251560 can-be-enlarged\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20170218025516\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/too-big.jpg\" sizes=\"(min-width: 1654px) 900px, (min-width: 64em) calc( 56vw ), 100vw\" srcset=\"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/too-big.jpg 1500w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/too-big-300x198.jpg 300w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/too-big-768x507.jpg 768w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/too-big-1024x676.jpg 1024w\" alt=\"\" \/><figcaption>1MB is huge \ud83d\ude41<\/figcaption><\/figure>\n<p>We could cut that by 75% using PNG-8, but then we 1) get that weird Giffy look (less photographic) and 2) have to pick a matte color for the edges because we aren&#8217;t getting nice alpha transparency here, just binary transparency.<\/p>\n<figure id=\"post-251561\" class=\"align-none media-251561 can-be-enlarged\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20170218025518\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/png8.jpg\" sizes=\"(min-width: 1654px) 900px, (min-width: 64em) calc( 56vw ), 100vw\" srcset=\"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/png8.jpg 884w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/png8-284x300.jpg 284w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/png8-768x811.jpg 768w\" alt=\"\" \/><figcaption>Much better file size, but quality is weird.<\/figcaption><\/figure>\n<p>Gosh what if we could just use JPG? The quality and file size is <strong>way<\/strong> better.<\/p>\n<figure id=\"post-251562\" class=\"align-none media-251562 can-be-enlarged\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20170218025519\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/jpg.jpg\" sizes=\"(min-width: 1654px) 900px, (min-width: 64em) calc( 56vw ), 100vw\" srcset=\"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/jpg.jpg 776w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/jpg-267x300.jpg 267w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/jpg-768x863.jpg 768w\" alt=\"\" \/><\/figure>\n<p>No transparency though.<\/p>\n<p>But wait! Can&#8217;t we just clip this thing out? We have <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/clip\/\" target=\"_blank\" rel=\"nofollow noopener\">clip-path<\/a> now. Well&#8230; yeah. We do have clip-path. It <a href=\"https:\/\/css-tricks.com\/basic-shapes-path-never-twain-shall-meet\/\" target=\"_blank\" rel=\"nofollow noopener\">can&#8217;t take<\/a> a <code>path()<\/code>, though, and what we&#8217;ve created for vector points in Photoshop is path data. It could take a <code>polygon()<\/code> though, if we made all the lines straight. That&#8217;s probably not ideal (I&#8217;m curvy!). Or we could make a <code>&lt;clipPath&gt;<\/code> element in some inline SVG and use <code>clip-path: url(#id_of_clipPath);<\/code>, which does support a <code>&lt;path&gt;<\/code> inside.<\/p>\n<p>There is <a href=\"https:\/\/css-tricks.com\/clipping-masking-css\/#article-header-id-5\" target=\"_blank\" rel=\"nofollow noopener\">masking<\/a> as well, which is another possibility.<\/p>\n<p>Let&#8217;s look at a third possibility though: put everything into <code>&lt;svg&gt;<\/code>. That made some logical sense to me, so all this stays together and scales together.<\/p>\n<p>The trick is to make two things:<\/p>\n<ol>\n<li>The JPG<\/li>\n<li>The clipping <code>&lt;path&gt;<\/code><\/li>\n<\/ol>\n<p>The JPG is easy enough. Output that right from Photoshop. <a href=\"https:\/\/css-tricks.com\/automatic-image-optimization-hazel-imageoptim\/\" target=\"_blank\" rel=\"nofollow noopener\">Optimize<\/a>.<\/p>\n<p>Now we can set up the SVG. SVG is happy to take a raster graphic. SVG is known for vector graphics, but it&#8217;s a very flexible image format.<\/p>\n<pre class=\" language-markup\"><code class=\" language-markup\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>image <span class=\"token attr-name\"><span class=\"token namespace\">xlink:<\/span>href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\/images\/chris.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">x<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">y<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p>To get the path, we export the path we created with the Pen tool over to Illustrator.<\/p>\n<figure id=\"post-251563\" class=\"align-none media-251563 can-be-enlarged\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20170218025520\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/paths-to-illustrator.jpg\" sizes=\"(min-width: 1654px) 900px, (min-width: 64em) calc( 56vw ), 100vw\" srcset=\"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/paths-to-illustrator.jpg 1064w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/paths-to-illustrator-262x300.jpg 262w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/paths-to-illustrator-768x879.jpg 768w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/paths-to-illustrator-895x1024.jpg 895w\" alt=\"\" \/><\/figure>\n<p>Now we have the path over there, and it&#8217;s easy to export as SVG:<\/p>\n<figure id=\"post-251564\" class=\"align-none media-251564 can-be-enlarged\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20170218025522\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/clip-from-ai.jpg\" sizes=\"(min-width: 1654px) 900px, (min-width: 64em) calc( 56vw ), 100vw\" srcset=\"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/clip-from-ai.jpg 1582w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/clip-from-ai-300x284.jpg 300w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/clip-from-ai-768x727.jpg 768w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/clip-from-ai-1024x970.jpg 1024w\" alt=\"\" \/><\/figure>\n<p>Now we have the path data we need:<\/p>\n<figure id=\"post-251565\" class=\"align-none media-251565 can-be-enlarged\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20170819175122\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/path-data.jpg\" sizes=\"(min-width: 1654px) 900px, (min-width: 64em) calc( 56vw ), 100vw\" srcset=\"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/path-data.jpg 1672w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/path-data-300x117.jpg 300w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/path-data-768x299.jpg 768w, https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/path-data-1024x399.jpg 1024w\" alt=\"\" \/><figcaption>Even with all those points, this was 1.5K unoptimzed and ungzipped. Not much overhead.<\/figcaption><\/figure>\n<p>Let&#8217;s use that <code>&lt;path&gt;<\/code> within a <code>&lt;clipPath&gt;<\/code> in the SVG we&#8217;ve started. Then also apply that clip path to the <code>&lt;image&gt;<\/code>:<\/p>\n<pre class=\" language-markup\"><code class=\" language-markup\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>0 0 921.17 1409.71<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>defs<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>clipPath <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>chris-clip<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n      <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>path <span class=\"token attr-name\">d<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span> ... <span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>clipPath<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>defs<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>image <span class=\"token attr-name\"><span class=\"token namespace\">xlink:<\/span>href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\/images\/chris.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">clip-path<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>url(#chris-clip)<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">x<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">y<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p>Tada!<\/p>\n<figure class=\"align-none\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/images\/done.gif\" alt=\"\" \/><\/figure>\n<p>A transparent JPG, essentially.<\/p>\n<p><em>source: <a href=\"https:\/\/css-tricks.com\/transparent-jpg-svg\/\" target=\"_blank\" rel=\"nofollow noopener\">css-tricks<\/a><\/em><\/p>\n<div class=\"sharedaddy sd-sharing-enabled\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s say you have a photographic image that really should be a JPG or WebP, for the best file size and quality. But what if I need transparency too? Don&#8217;t I need PNG for that? Won&#8217;t that make for either &hellip; <a href=\"https:\/\/hellbach.us\/blog\/tech\/dev\/transparent-jpg-svg\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,2],"tags":[181,183,179,180,182],"class_list":["post-2059","post","type-post","status-publish","format-standard","hentry","category-dev","category-tech","tag-jpeg","tag-svg","tag-transparency","tag-transparent","tag-webp"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Transparent JPG (With SVG) - Hellbach blog<\/title>\n<meta name=\"description\" content=\"How to apply transparency to JPG (WebP) images with the help of SVG.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transparent JPG (With SVG)\" \/>\n<meta property=\"og:description\" content=\"How to apply transparency to JPG (WebP) images with the help of SVG.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/\" \/>\n<meta property=\"og:site_name\" content=\"Hellbach blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-16T22:33:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-24T22:34:34+00:00\" \/>\n<meta name=\"author\" content=\"alex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Transparent JPG (With SVG)\" \/>\n<meta name=\"twitter:description\" content=\"How to apply transparency to JPG (WebP) images with the help of SVG.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/transp-jpg.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/\"},\"author\":{\"name\":\"alex\",\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"headline\":\"Transparent JPG (With SVG)\",\"datePublished\":\"2017-02-16T22:33:59+00:00\",\"dateModified\":\"2022-11-24T22:34:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/\"},\"wordCount\":449,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"image\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/web.archive.org\/web\/20170218025513\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg\",\"keywords\":[\"jpeg\",\"svg\",\"transparency\",\"transparent\",\"webp\"],\"articleSection\":[\"Dev\",\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/\",\"url\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/\",\"name\":\"Transparent JPG (With SVG) - Hellbach blog\",\"isPartOf\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/web.archive.org\/web\/20170218025513\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg\",\"datePublished\":\"2017-02-16T22:33:59+00:00\",\"dateModified\":\"2022-11-24T22:34:34+00:00\",\"description\":\"How to apply transparency to JPG (WebP) images with the help of SVG.\",\"breadcrumb\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#primaryimage\",\"url\":\"https:\/\/web.archive.org\/web\/20170218025513\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg\",\"contentUrl\":\"https:\/\/web.archive.org\/web\/20170218025513\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hellbach.us\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Transparent JPG (With SVG)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hellbach.us\/blog\/#website\",\"url\":\"https:\/\/hellbach.us\/blog\/\",\"name\":\"Hellbach blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hellbach.us\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\",\"name\":\"alex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g\",\"caption\":\"alex\"},\"logo\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Transparent JPG (With SVG) - Hellbach blog","description":"How to apply transparency to JPG (WebP) images with the help of SVG.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/","og_locale":"en_US","og_type":"article","og_title":"Transparent JPG (With SVG)","og_description":"How to apply transparency to JPG (WebP) images with the help of SVG.","og_url":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/","og_site_name":"Hellbach blog","article_published_time":"2017-02-16T22:33:59+00:00","article_modified_time":"2022-11-24T22:34:34+00:00","author":"alex","twitter_card":"summary_large_image","twitter_title":"Transparent JPG (With SVG)","twitter_description":"How to apply transparency to JPG (WebP) images with the help of SVG.","twitter_image":"https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/transp-jpg.jpg","twitter_misc":{"Written by":"alex","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#article","isPartOf":{"@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/"},"author":{"name":"alex","@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"headline":"Transparent JPG (With SVG)","datePublished":"2017-02-16T22:33:59+00:00","dateModified":"2022-11-24T22:34:34+00:00","mainEntityOfPage":{"@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/"},"wordCount":449,"commentCount":0,"publisher":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"image":{"@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/web.archive.org\/web\/20170218025513\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg","keywords":["jpeg","svg","transparency","transparent","webp"],"articleSection":["Dev","Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/","url":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/","name":"Transparent JPG (With SVG) - Hellbach blog","isPartOf":{"@id":"https:\/\/hellbach.us\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#primaryimage"},"image":{"@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/web.archive.org\/web\/20170218025513\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg","datePublished":"2017-02-16T22:33:59+00:00","dateModified":"2022-11-24T22:34:34+00:00","description":"How to apply transparency to JPG (WebP) images with the help of SVG.","breadcrumb":{"@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#primaryimage","url":"https:\/\/web.archive.org\/web\/20170218025513\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg","contentUrl":"https:\/\/web.archive.org\/web\/20170218025513\/https:\/\/cdn.css-tricks.com\/wp-content\/uploads\/2017\/02\/orig.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/hellbach.us\/blog\/tech\/transparent-jpg-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hellbach.us\/blog\/"},{"@type":"ListItem","position":2,"name":"Transparent JPG (With SVG)"}]},{"@type":"WebSite","@id":"https:\/\/hellbach.us\/blog\/#website","url":"https:\/\/hellbach.us\/blog\/","name":"Hellbach blog","description":"","publisher":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hellbach.us\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507","name":"alex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g","caption":"alex"},"logo":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts\/2059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/comments?post=2059"}],"version-history":[{"count":0,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts\/2059\/revisions"}],"wp:attachment":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/media?parent=2059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/categories?post=2059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/tags?post=2059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}