{"id":18744,"date":"2013-11-29T18:01:19","date_gmt":"2013-11-29T10:01:19","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18744"},"modified":"2024-06-24T20:22:52","modified_gmt":"2024-06-24T12:22:52","slug":"psd-text-svg","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/","title":{"rendered":"How to Convert Photoshop Text to SVG"},"content":{"rendered":"<p>With the <strong>advent of high-definition screens<\/strong>, web designers must ensure their images are <strong>optimized for HD<\/strong> to avoid blurry or pixelated websites. Using vector graphics is an excellent solution for HD screens due to their scalability.<\/p>\n<p>Vector graphics can be resized to any dimension without losing quality, making them ideal for HD displays. In this guide, we\u2019ll show you how to convert <strong>Photoshop text into SVG<\/strong> format, particularly useful for text-based logos.<\/p>\n<h2>Photoshop Stage<\/h2>\n<p>We\u2019ll demonstrate this process using a simple text-based logo designed with the <a href=\"https:\/\/www.fontsquirrel.com\/\/fonts\/pacifico\">Pacifico<\/a> font family.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/logo-example.jpg\" alt=\"Example of text logo in Pacifico font\" width=\"500\" height=\"250\"><\/figure>\n<p>Right-click on the text layer in the <strong>Layers<\/strong> panel in Photoshop and select <strong>Convert to Shape<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/convert-to-shape.jpg\" alt=\"Photoshop option to convert text to shape\" width=\"500\" height=\"250\"><\/figure>\n<p>Afterwards, save the file in <strong>Photoshop EPS<\/strong> format.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/save-eps.jpg\" alt=\"Saving file in EPS format\" width=\"500\" height=\"320\"><\/figure>\n<h2>Illustrator Stage<\/h2>\n<p>Open the EPS file in <strong>Adobe Illustrator<\/strong>. Your text should now appear as a vector object.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/vector-obj.jpg\" alt=\"Vector object in Adobe Illustrator\" width=\"500\" height=\"250\"><\/figure>\n<p>Make necessary adjustments such as removing unwanted layers, altering background colors, or resizing. To resize the document in Illustrator, navigate to <strong>File &gt; Document Setup<\/strong> and choose <span class=\"key\">Edit Artboards<\/span>. Resize the Artboard either using the mouse or by specifying exact dimensions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/resize-artboard.jpg\" alt=\"Resizing artboard in Illustrator\" width=\"500\" height=\"320\"><\/figure>\n<p>Finally, <strong>save the file in SVG format<\/strong>, which is the standard option.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/save-svg.jpg\" alt=\"Saving the file as SVG\" width=\"500\" height=\"250\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>With the advent of high-definition screens, web designers must ensure their images are optimized for HD to avoid blurry or pixelated websites. Using vector graphics is an excellent solution for HD screens due to their scalability. Vector graphics can be resized to any dimension without losing quality, making them ideal for HD displays. In this&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43],"tags":[1939,2175],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Convert Photoshop Text to SVG - Hongkiat<\/title>\n<meta name=\"description\" content=\"With the advent of high-definition screens, web designers must ensure their images are optimized for HD to avoid blurry or pixelated websites. Using\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Convert Photoshop Text to SVG\" \/>\n<meta property=\"og:description\" content=\"With the advent of high-definition screens, web designers must ensure their images are optimized for HD to avoid blurry or pixelated websites. Using\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-29T10:01:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-24T12:22:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/logo-example.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\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:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Convert Photoshop Text to SVG\",\"datePublished\":\"2013-11-29T10:01:19+00:00\",\"dateModified\":\"2024-06-24T12:22:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/\"},\"wordCount\":191,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/psd-text-svg\\\/logo-example.jpg\",\"keywords\":[\"Photoshop tips\",\"Scalable Vector Graphics (SVG)\"],\"articleSection\":[\"Photoshop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/\",\"name\":\"How to Convert Photoshop Text to SVG - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/psd-text-svg\\\/logo-example.jpg\",\"datePublished\":\"2013-11-29T10:01:19+00:00\",\"dateModified\":\"2024-06-24T12:22:52+00:00\",\"description\":\"With the advent of high-definition screens, web designers must ensure their images are optimized for HD to avoid blurry or pixelated websites. Using\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/psd-text-svg\\\/logo-example.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/psd-text-svg\\\/logo-example.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-text-svg\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Convert Photoshop Text to SVG\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Convert Photoshop Text to SVG - Hongkiat","description":"With the advent of high-definition screens, web designers must ensure their images are optimized for HD to avoid blurry or pixelated websites. Using","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:\/\/www.hongkiat.com\/blog\/psd-text-svg\/","og_locale":"en_US","og_type":"article","og_title":"How to Convert Photoshop Text to SVG","og_description":"With the advent of high-definition screens, web designers must ensure their images are optimized for HD to avoid blurry or pixelated websites. Using","og_url":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-11-29T10:01:19+00:00","article_modified_time":"2024-06-24T12:22:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/logo-example.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Convert Photoshop Text to SVG","datePublished":"2013-11-29T10:01:19+00:00","dateModified":"2024-06-24T12:22:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/"},"wordCount":191,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/logo-example.jpg","keywords":["Photoshop tips","Scalable Vector Graphics (SVG)"],"articleSection":["Photoshop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/","url":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/","name":"How to Convert Photoshop Text to SVG - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/logo-example.jpg","datePublished":"2013-11-29T10:01:19+00:00","dateModified":"2024-06-24T12:22:52+00:00","description":"With the advent of high-definition screens, web designers must ensure their images are optimized for HD to avoid blurry or pixelated websites. Using","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/logo-example.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/psd-text-svg\/logo-example.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Convert Photoshop Text to SVG"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Sk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18744"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18744\/revisions"}],"predecessor-version":[{"id":72196,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18744\/revisions\/72196"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18744"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}