Menu
As the title says, how can I modify a svg in Adobe Illustrator?
For example, I got this
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<text transform="matrix(1 0 0 1 225 321)" font-family="'MyriadPro-Regular'" font-size="12">This a TEST!</text>
<path fill="none" d="M177,246c0,92.859,77.824,168,174,168"/>
<path fill="none" d="M357,246c0,161.398-105.555,292-236,292"/>
<path fill="none" d="M288,414c0,113.311-23.252,205-51.987,205"/>
<rect x="93" y="383" fill="none" width="364" height="147"/>
<g>
<rect x="167" y="272" fill="none" width="216" height="244.5"/>
</g>
<rect x="476" y="428" fill="none" width="216" height="244.5"/>
<rect x="121" y="230" fill="none" width="403" height="231"/>
<rect x="179" y="158" fill="none" width="362" height="454.25"/>
<rect x="73" y="230" fill="none" width="294" height="184"/>
<rect x="371" y="516.5" fill="none" width="12" height="13.5"/>
<rect x="167" y="143" fill="none" width="221" height="387"/>
</svg>
(It doesn't contain anything, its just a random svg).
Do I have to download it as .svg first? And how can I download it as .svg?
874
If you have the Adobe suite (and there's a 30 day free trial) you can use either Photoshop paths or Illustrator to import, edit and export SVGs.
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. You can now import SVG files in to Animate. Some of the import options work the same as the import options for Adobe Illustrator files.
Paste it into a text file named whatever.svg and open that file in Illustrator.
116
Create a .html document
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head profile="http://gmpg.org/xfn/11">
</head>
<body>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<text transform="matrix(1 0 0 1 225 321)" font-family="'MyriadPro-Regular'" font-size="12">This a TEST!</text>
<path fill="none" d="M177,246c0,92.859,77.824,168,174,168"/>
<path fill="none" d="M357,246c0,161.398-105.555,292-236,292"/>
<path fill="none" d="M288,414c0,113.311-23.252,205-51.987,205"/>
<rect x="93" y="383" fill="none" width="364" height="147"/>
<g>
<rect x="167" y="272" fill="none" width="216" height="244.5"/>
</g>
<rect x="476" y="428" fill="none" width="216" height="244.5"/>
<rect x="121" y="230" fill="none" width="403" height="231"/>
<rect x="179" y="158" fill="none" width="362" height="454.25"/>
<rect x="73" y="230" fill="none" width="294" height="184"/>
<rect x="371" y="516.5" fill="none" width="12" height="13.5"/>
<rect x="167" y="143" fill="none" width="221" height="387"/>
</svg>
</body>
</html>Open this in the Browser. Open print and press "save as .pdf"
Now you can open this in Illustrator.
Example
41
If it's an image from the web, you can right-click 'inspect' and then click and copy [cntrl-c] in windows on the first <svg> tag. Then you should be able to directly copy the enitre svg data as an image into illustrator.
If the svg data is not embedded in the web page, you may first need to open up it's link into a new tab or get it from the 'Elements' tab in DevTools.
43
Copy the SVG code to the clipboard and paste it into your Illustrator document.
Tested on Illustrator 25.
Source
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
