photopea-v2/blog.photopea.com/photopea-3-0-with-svg.html

93 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title> Photopea 3.0: SVG support</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4249565-38', 'photopea.com'); ga('send', 'pageview');
</script>
</head>
<body>
<div id="page">
<div id="header">
<a href="https://blog.photopea.com/" class="title">Photopea Blog</a>
<!--<p>Web-based image editor.</p>-->
<a class="curr" href="//blog.photopea.com">Blog</a> |
<a href="//www.photopea.com/learn">Learn</a> |
<a href="//www.photopea.com/tuts">Tutorials</a> |
<a href="//www.photopea.com/templates">Templates</a> |
<a href="//www.photopea.com/api">API</a> |
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
</div> <div id="main">
<div id="content">
<div class="post" id="post-551">
<span class="date">August 14, 2017</span>
<h1>Photopea 3.0: SVG support</h1>
<div class="entry">
<p>New release of Photopea is here with Scripting and a better support for Sketch files! It has <strong>47 362</strong> lines of code. Play with it at the <a href="//www.photopea.com">main site</a>.</p>
<span id="more-551"></span>
<h2>New features</h2>
<ul>
<li>SVG import and export</li>
<li>Improved touch-screen experience</li>
<li>Premium accounts for teams</li>
<li>Several bugs fixed</li>
</ul>
<h2>SVG</h2>
<p>SVG is a very popular format for storing vector graphics, and it is probably the only truly "web format" for this purpose.
Unlike PDF, SVG can be crated with a text editor (just like HTML), you can use CSS to style it, and Javascript to make it interactive.
Even comlex vector graphics can be stored in SVG, such as <a href="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/gallardo.svg">this Lamborghini</a> (zoom in to see, that everything really is vector graphics).</p>
<p>Starting today, you can load SVG files into Photopea, and export SVG files from it. You can use it as a PSD to SVG converter, Sketch to SVG converter, SVG to PSD converter etc.</p>
<p><a href="https://www.photopea.com?p=%7B%22files%22:%5B%22https://www.photopea.com/api/img2/gallardo.svg%22%5D,%22environment%22:%7B%7D%7D" target="_blank">Load the Lamborghini now</a> and see, that all the vector shapes and their properties are preserved. Now, you can save it as a PSD, or export back to SVG (File - Export As - SVG).</p>
<img src="//i.imgur.com/iHbe1Yb.png" class="fullw" />
<p>There are several options of SVG export. You can choose to export raster layers, rasterize text layers and more. When you export a PSD to SVG and then convert the PSD back to SVG, it almost always preserves the same structure.</p>
</div>
</div>
</div><!--content-->
<div style="width:110px; margin: 0px auto;">
<a href="#" title="Share on Facebook" onclick="smallWindow('http://www.facebook.com/share.php?u=');"><img src="//www.photopea.com/promo/fb.png" /></a>
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="//www.photopea.com/promo/gp.png" /></a>
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="//www.photopea.com/promo/tw.png" /></a>
<script type="text/javascript">
function smallWindow(url)
{
var w = 640, h = 300;
window.open(url+"https://blog.photopea.com/photopea-3-0-with-svg.html", "Share", "width="+w+",height="+h+",left="+Math.floor((window.innerWidth-w)/2)+",top="+Math.floor((window.innerHeight-h)/2));
}
</script>
</div>
</div>
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'photopeablog'; // required: replace example with your forum shortname
(function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
</script>
<!--main-->
<?//php get_sidebar(); ?>
<div id="footer">&copy; 2013-2021 support@photopea.com</div>
</div> <!--page-->
</body>
</html>