SVG 캔버스를 로컬 파일 시스템에 저장하는 방법

Question 1

사용자가 브라우저를 사용하여 javascript svg 캔버스에 벡터 그래프를 만든 후이 파일을 로컬 파일 시스템에 다운로드 할 수있는 방법이 있습니까?

SVG는 저에게 완전히 새로운 분야이므로 제 표현이 정확하지 않다면 잠시 기다려주십시오.

Question 2

일반 "저장"브라우저 명령을 사용하는 것이 가능할 수도 있지만 SVG 캔버스 만 저장하는 것이 아니라 전체 페이지를 저장합니다.

가장 좋은 방법은 AJAX를 사용하고 전체 SVG XML 데이터를 POST 데이터로 서버 스크립트에 보내고 해당 스크립트가 헤더와 함께 POST 데이터를 다시 보내도록하는 것 Content-Disposition: attachment; filename=yourfile.svg입니다.

(PHP에서는를 사용하여 원시 POST 내용을 얻을 수 있습니다 file_get_contents('php://input').)

Question 3

서버로의 왕복을 피할 수 있습니다.

Base64는 SVG xml을 인코딩합니다.

그런 다음 해당 데이터에 대한 링크를 생성하십시오. 사용자는를 마우스 오른쪽 버튼으로 클릭하여 로컬에 저장할 수 있습니다.

// This example was created using Protovis & jQuery
// Base64 provided by http://www.webtoolkit.info/javascript-base64.html
// Modern web browsers have a builtin function to this as well 'btoa'
function encode_as_img_and_link(){
 // Add some critical information
 $("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});

 var svg = $("#chart-canvas").html();
 var b64 = Base64.encode(svg); // or use btoa if supported

 // Works in recent Webkit(Chrome)
 $("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));

 // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
 $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));
}

img 태그는 Webkit에서 작동하고 링크는 Webkit 및 Firefox에서 작동하며 다음을 지원하는 모든 브라우저에서 작동 할 수 있습니다. data-uri

Question 4

FileSaver.js 사용

saveAs(new Blob([SVG_DATA_HERE], {type:"application/svg+xml"}), "name.svg")

Question 5

base64 인코딩을 수행 할 필요가 없습니다. 원시 SVG 코드가 포함 된 링크를 만들 수 있습니다. 다음은 The_Who의 답변에서 수정 된 encode_as_img_and_link () 함수입니다.

function img_and_link() {
  $('body').append(
    $('<a>')
      .attr('href-lang', 'image/svg+xml')
      .attr('href', 'data:image/svg+xml;utf8,' +  unescape($('svg')[0].outerHTML))
      .text('Download')
  );
}

Question 6

Eli Gray의 FileSaver 를 사용하면 작동합니다 (크롬).

bb = new window.WebKitBlobBuilder;
var svg = $('#designpanel').svg('get');
bb.append(svg.toSVG());
var blob = bb.getBlob("application/svg+xml;charset=" + svg.characterSet);
saveAs(blob,"name.svg");

SVG는 keith woods jquery의 svg에서 가져온 것입니다.

HTML 록스 1

HTML 록스 2

Question 7

	// save SVG
	$('#SVGsave').click(function(){
		var a      = document.createElement('a');
		a.href     = 'data:image/svg+xml;utf8,' + unescape($('#SVG')[0].outerHTML);
		a.download = 'plot.svg';
		a.target   = '_blank';
		document.body.appendChild(a); a.click(); document.body.removeChild(a);
	});

스 니펫 확장

Question 8

최근에이 Chrome 플러그인 http://nytimes.github.io/svg-crowbar/를 찾았습니다 . 내 필요에 따라 약간 버그가 있지만 본질적으로 작동합니다.

나는 이전에 서버 측 스크립트를 포함하는 수용된 답변과 유사한 솔루션을 만들었지 만 꽤 오래 걸리고 모든 스타일이 마크 업에 인라인되어야한다는 문제도있었습니다. Crowbar가 당신을 위해 그것을 처리하는 것 같습니다.

Question 9

몇 년이 지났지 만 SVG 및 기타 관련 동작을 지원하는 웹 브라우저의 최근 수렴으로 인해 SVG에 대한 새로운 관심이 생기고 질문에 대한 '보편적 인'답변이 가능해 졌기 때문에이 주제에 대해 답변하고 있습니다. 본질적으로 zneak의 접근 방식은 정확하지만 제 생각에는 간결합니다 (즉, 저 자신을 위해 작동하는 데 시간이 걸렸습니다). 또한 AJAX에 대한 그의 참조가 불필요하거나 AJAX가 이해하는 내용이 아니라고 생각합니다 (= XMLHttpRequest 사용). 따라서 순수한 JavaScript (즉, JQuery 또는 다른 라이브러리없이)를 사용하여보다 자세한 답변을 제공하고 Java, Perl 및 PHP 용 서버 코드를 제공 할 것입니다.

(1) HTML 페이지의 (동적으로 생성 된) SVG 콘텐츠를 고유 ID를 가진 div로 묶습니다. 예 :

<div id="svg"><svg...>SVG content</svg></div>

(2) JavaScript 기능을 호출하는 버튼을 포함합니다.

<button onclick="sendSVG();">Save as SVG File</button>

(3) 버튼 마크 업에 이름이 지정된 JavaScript 함수를 포함합니다.

function sendSVG() 
{
   var svgText = document.getElementById('svg').innerHTML;

   var form = document.createElement("form");
   form.setAttribute("method", "post");
   form.setAttribute("action", "http://path-to-your-server-app");
   form.setAttribute("accept-charset", "UTF-8");

   var hiddenSVGField = document.createElement("input");    
   hiddenSVGField.setAttribute("type", "hidden");
   hiddenSVGField.setAttribute("name", "svgText");
   hiddenSVGField.setAttribute("value", svgText);

   form.appendChild(hiddenSVGField);
   document.body.appendChild(form);
   form.submit();
}

(4) SVGtext 게시 요청을 수락하고 첨부 파일을 지정하기 위해 Content-Disposition을 사용하여 image / svg + xml로 반환하는 서버 앱을 작성합니다. 비록 나는 Perl 프로그래머가 아니고 화가 나서 PHP를 사용한 적이 없지만 세 가지 언어로 된 작업 코드가 제공됩니다.

자바 서블릿

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
   String svgText = (String) request.getParameter("svgText");
   response.setContentType("image/svg+xml");
   response.addHeader("Content-Disposition", "attachment; filename=\"image.svg\"");
   PrintWriter out = response.getWriter();
   out.println(svgText);
}

Perl CGI

use CGI qw(:standard);
my $svgText = param('svgText');
print header(-type => "image/svg+xml",
    -content_disposition => "attachment; filename=image.svg");      
print $svgText;

PHP

<?php
   $svgText = $_POST['svgText'];
   header('Content-type: image/svg+xml');
   header('Content-Disposition: attachment; filename="image.svg"'); 
   print "$svgText";
?>

여기에 이미지에 하드 코딩 된 이름 (image.svg)을 사용했지만 실제로 페이지에서 생성 한 동적 콘텐츠의 설명자를 선택합니다 (div와 ID를 다시 사용하고 document.getElementById('graphName').textContent).

이것은 Mac Safari 9, Firefox 42, Chrome 47, Opera 34, Windows7 / IE 11 및 Windows10 / Edge에서 테스트되었으며 각 경우에 svg 파일이 다운로드되거나 다운로드하라는 메시지가 표시됩니다. 결과 파일은 예를 들어 Adobe Illustrator 또는 svg 파일을 열도록 설정 한 다른 응용 프로그램에서 열립니다.

이에 대한 실제 사례 (실제 학술 연구를 고려하는 경우)는 유전자 섹션의 http://flyatlas.gla.ac.uk/MidgutAtlas/index.html 에 있습니다.

Question 10

네 가능합니다. jquery.svg http://keith-wood.name/svgRef.html을 사용하고 svg.toSVG () 함수를 사용하여 svg xml 데이터를 게시합니다 (제출시 숨겨진 필드에 쓰기). PHP가 imagemagick (image.svg image.png 변환)를 사용하여 래스터로 저장하고 변환 한 다음 헤더 ( "Content-Type : application / octet-stream")를 사용하여 파일을 강제로 다운로드하고 이미지를 읽어옵니다.

Question 11

가장 호환되는 방법은 서버로의 왕복입니다. 일부 브라우저 에서는 data : URI 를 사용할 수도 있습니다 .

Question 12

javascript를 사용하여 로컬 파일 시스템에 아무것도 저장할 수 없습니다.해야 할 일은의 내용을 canvas서버에 보내고 사용자가 다운로드하여 저장하도록하는 것입니다.

Question 13

내 질문에 답하려면 :

가장 좋지는 않지만 또 다른 가능성은 웹 페이지에 직렬화 된 내용을 표시하고 사용자가이를 선택, 복사 및 붙여 넣도록하는 것입니다. 이것은 eli grey의 솔루션을 조사한 후입니다.

Question 14

사용자가 "이미지를 다른 이름으로 저장"을 마우스 오른쪽 단추로 누르지 않도록하는 더 좋은 방법을 찾았을 것입니다. 캔버스 base64 코드를 링크의 href에 라이브로 그리고 수정하면 다운로드가 자동으로 시작됩니다. 범용 브라우저가 호환되는지는 모르겠지만 기본 / 새 브라우저에서 작동해야합니다.

var canvas = document.getElementById('your-canvas');
    if (canvas.getContext) {
        var C = canvas.getContext('2d');
    }

$('#your-canvas').mousedown(function(event) {
    // feel free to choose your event ;) 

    // just for example
    // var OFFSET = $(this).offset();
    // var x = event.pageX - OFFSET.left;
    // var y = event.pageY - OFFSET.top;

    // standard data to url
    var imgdata = canvas.toDataURL('image/png');
    // modify the dataUrl so the browser starts downloading it instead of just showing it
    var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream');
    // give the link the values it needs
       $('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata);

});

당신이 원하는 것을 무엇이든 감쌀 수 있습니다.

Question 15

$(document).ready(function(){	
 $("#btnDownload").click(function(){
	var $container = $('#svg-container'),
     // Canvg requires trimmed content
    content = $container.html().trim(),
    canvas = document.getElementById('svg-canvas');
	
	// Draw svg on canvas
    canvg(canvas, content);
	$container.hide();
    // Change img be SVG representation
    var theImage = canvas.toDataURL('image/jpeg');
	
	var a = document.createElement('a');
	a.href = theImage; // xhr.response es un blob file
	a.target = '_blank';
	a.download = 'prueba'; // nombre del archivo.
	a.style.display = 'none';
	document.body.appendChild(a);
	a.click();
	delete a;
});//fin function
});// fin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
<input id="svgData" name="svgData" type="hidden"/>
<input id="btnDownload" type="button" value="Descargar"/>
<div id='svg-container'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"><desc>Created with Highcharts 4.0.4</desc><defs><clipPath id="highcharts-5"><rect x="-75" y="-75" width="750" height="550"></rect></clipPath></defs><rect x="0" y="0" width="600" height="400" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"></rect><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 59 79 L 460 61 L 456 287 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 65 330 L 456 287 L 456 286 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 0 0"  stroke-linejoin="round"></path></g><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 496 66 L 490 300 L 490 301 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 495 66 L 460 61 L 455 287 L 490 301 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 460 61 L 460 61 L 496 66 Z"  stroke-linejoin="round"></path></g><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 345 L 490 300 L 490 300 L 88 346 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 346 L 490 300 L 457 287 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 88 345 L 65 329 L 65 330 L 88 346 Z"  stroke-linejoin="round"></path></g><g class="highcharts-grid" ><path fill="none" d="M 146 75 L 146 75 L 150 320 L 175 336" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 189 73 L 189 73 L 191 316 L 217 331" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 230 71 L 230 71 L 232 311 L 259 326" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 271 69 L 271 69 L 271 307 L 300 322" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 310 67 L 310 67 L 310 302 L 339 317" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 349 66 L 349 66 L 348 298 L 378 313" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 387 64 L 387 64 L 385 294 L 416 308" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 424 62 L 424 62 L 421 290 L 454 304" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 461 61 L 461 61 L 457 286 L 491 300" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 103 77 L 103 77 L 108 325 L 131 341" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 59 79 L 59 79 L 65 329 L 87 345" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path></g><g class="highcharts-grid" ><path fill="none" d="M 59 78 L 59 78 L 461 60 L 496 66" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 61 144 L 61 144 L 460 119 L 494 127" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 62 206 L 62 206 L 459 175 L 493 185" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 64 269 L 64 269 L 458 232 L 492 243" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 65 330 L 65 330 L 457 286 L 490 300" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path></g><g class="highcharts-axis" ><path fill="none" d="M 75 325.5 L 525 325.5" stroke="#C0D0E0" stroke-width="1"  visibility="hidden"></path></g><g class="highcharts-axis" ><text x="556.96875"  text-anchor="middle" transform="translate(0,0) rotate(90 556.96875 200)" class=" highcharts-yaxis-title" style="color:#707070;fill:#707070;" visibility="visible" y="200">Values</text></g><g class="highcharts-series-group" ><g class="highcharts-series" visibility="visible"  transform="translate(75,75) scale(1 1)" clip-path="url(#highcharts-5)"><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 390 141 L 408 139 L 406 226 L 388 228 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 390 141 L 378 137 L 376 223 L 388 228 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 390 141 L 378 137 L 395 136 L 408 139 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 353 56 L 372 54 L 369 230 L 351 232 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 353 56 L 342 53 L 339 227 L 351 232 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 353 56 L 342 53 L 360 52 L 372 54 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 314 118 L 333 117 L 332 235 L 313 237 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 314 118 L 303 114 L 302 231 L 313 237 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 314 118 L 303 114 L 322 113 L 333 117 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 275 212 L 294 210 L 293 239 L 274 241 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 275 212 L 264 207 L 283 205 L 294 210 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 275 212 L 264 207 L 264 236 L 274 241 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 235 94 L 255 93 L 254 243 L 235 246 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 235 94 L 224 90 L 224 240 L 235 246 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 235 94 L 224 90 L 244 89 L 255 93 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 194 250 L 214 248 L 214 248 L 194 250 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 194 250 L 184 245 L 204 243 L 214 248 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 194 250 L 184 245 L 184 245 L 194 250 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 152 131 L 173 130 L 173 253 L 153 255 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 152 131 L 142 127 L 143 249 L 153 255 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 152 131 L 142 127 L 163 126 L 173 130 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 66 170 L 88 168 L 89 262 L 68 264 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 66 170 L 57 165 L 59 259 L 68 264 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 66 170 L 57 165 L 79 163 L 88 168 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 23 206 L 44 204 L 45 267 L 24 269 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 23 206 L 14 201 L 15 264 L 24 269 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 23 206 L 14 201 L 36 199 L 44 204 Z"  stroke-linejoin="round"></path></g></g><g class="highcharts-markers" visibility="visible"  transform="translate(75,75) scale(1 1)" clip-path="none"></g></g><text x="300" text-anchor="middle" class="highcharts-title"  style="color:#333333;font-size:18px;fill:#333333;width:536px;" y="25"><tspan>3D chart with null values</tspan></text><text x="300" text-anchor="middle" class="highcharts-subtitle"  style="color:#555555;fill:#555555;width:536px;" y="53"><tspan>Notice the difference between a 0 value and a null point</tspan></text><g class="highcharts-legend"  transform="translate(270,364)"><g ><g><g class="highcharts-legend-item"  transform="translate(8,3)"><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"  y="15">Sales</text><rect x="0" y="4" width="16" height="12"  fill="#7cb5ec"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" ><text x="110" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="363" z="-59" opacity="1">Jan</text><text x="154" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="358" z="-40" opacity="1">Feb</text><text x="197" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="353" z="-22" opacity="1">Mar</text><text x="239" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="348" z="-3" opacity="1">Apr</text><text x="280" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="343" z="16" opacity="1">May</text><text x="320" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="338" z="35" opacity="1">Jun</text><text x="359" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="334" z="53" opacity="1">Jul</text><text x="398" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="329" z="72" opacity="1">Aug</text><text x="435" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="324" z="91" opacity="1">Sep</text><text x="472" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="320" z="109" opacity="1">Oct</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" ><text x="502" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="301" z="122" opacity="1">0</text><text x="504" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="244" z="111" opacity="1">2</text><text x="505" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="187" z="100" opacity="1">4</text><text x="506" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="128" z="90" opacity="1">6</text><text x="508" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="69" z="79" opacity="1">8</text></g><g class="highcharts-tooltip"  style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-9999)"><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgb(249, 249, 249)" fill-opacity=" .85" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"></path><text x="8"  style="font-size:12px;color:#333333;fill:#333333;" y="21"></text></g><text x="590" text-anchor="end"  style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="395">Highcharts.com</text></svg>

</div>
<section>
	<canvas id="svg-canvas"></canvas>
</section>

스 니펫 확장

Question 16

나는 제안으로 깨끗하고 사용 가능한 북마크를 만들었습니다.

<svg>페이지의 모든 인라인 옆에 고유 한 링크 가 표시됩니다.

https://codepen.io/corysimmons/pen/vybzqV

누군가에게 도움이되기를 바랍니다.

Question 17

프로그래밍을 전혀 할 필요가 없습니다. 사람들이 이미이를 위해 구축 한 온라인 앱이 있으며 치수, 해상도, 출력 형식 등과 같은 정의 가능한 매개 변수를 포함합니다.

이것은 svg-> jpeg에서 찾은 더 나은 온라인 이미지 변환 앱 중 하나입니다. http://image.online-convert.com/convert-to-jpg