CODEWITHSUNDEEP
javascriptsvg
nicholaswmin
nicholaswmin

Reputation: 22949

Set as variable text with a lot of ""

I am trying to set this as a variable:

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">  <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->  <g>   <title>background</title>   <rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/>   <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>   </g>  </g>  <g>   <title>Layer 1</title>   <ellipse ry="69" rx="75" id="svg_1" cy="172" cx="207" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#FF8787"/>  </g> </svg>

The issue is that I wanted to have this as text stored in the variable but the starting "" get closed down from the ""s in the text itself.

How would I go about setting this correctly?

e.g: var svgSource = "<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <ellipse ry="69" rx="75" id="svg_1" cy="172" cx="207" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#FF8787"/>
 </g>
</svg>"

Upvotes: 0

Views: 77

Answers (4)

BRW
BRW

Reputation: 353

You can accomplish this by using single quotes (').

Like so:

var svgSource = "<svg width='500' height='400' xmlns='http://www.w3.org/2000/svg'>  <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->  <g>   <title>background</title>   <rect fill='#fff' id='canvas_background' height='402' width='502' y='-1' x='-1'/>   <g display='none' overflow='visible' y='0' x='0' height='100%' width='100%' id='canvasGrid'>    <rect fill='url(#gridpattern)' stroke-width='0' y='0' x='0' height='100%' width='100%'/>   </g>  </g>  <g>   <title>Layer 1</title>   <ellipse ry='69' rx='75' id='svg_1' cy='172' cx='207' fill-opacity='0.7' stroke-width='2' stroke='#995757' fill='#FF8787'/>  </g> </svg>"

As your desired text only contains double quotes, you could also just wrap the entire thing in single quotes.

var svgSource = '<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">  <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->  <g>   <title>background</title>   <rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/>   <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>   </g>  </g>  <g>   <title>Layer 1</title>   <ellipse ry="69" rx="75" id="svg_1" cy="172" cx="207" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#FF8787"/>  </g> </svg>'

Upvotes: 0

dthree
dthree

Reputation: 20740

Use single quotes.

var svgSource = '<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">  <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->  <g>   <title>background</title>   <rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/>   <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>   </g>  </g>  <g>   <title>Layer 1</title>   <ellipse ry="69" rx="75" id="svg_1" cy="172" cx="207" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#FF8787"/>  </g> </svg>'

I looked through it - your entire string doesn't have one single quote, only double. So just use single quotes to wrap it and that will work fine.

Upvotes: 2

Amit Joki
Amit Joki

Reputation: 59232

You've to do this:

  1. First replace the outermost quote " with '. This will remove the need to escape the quotes.
  2. Append a backward slash \ at the end of each line to make it a multiline string.

Upvotes: 1

user3310334
user3310334

Reputation:

You need to use the backslash (\)

var svgSource = "<svg width=\"500\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\">"

to "hide" (escape) the quotes, but still have them as part of the string.

Upvotes: 0

Related Questions