F.A.Q.

What does the inscription "Old type emblem"
- This means that the emblem was added in the old way. It differs from the new in that instead of layers used black circles. In the new method, you can edit each layer emblem.

I can not edit the layers after adding
- If the emblem in the title "Old type emblem" means the layers can not be edited. If such a label is not, and edit layers does not work, try changing the language to English page socialclub (I do not know why, but Rockstar internal scripts work better in English.).

How to create a emblem without an editor/should look like the SVG code?
- In the editor, there are two important elements - layers and svg code

1) SVG CODE
Rockstar does not accept any svg code. He needs some shapes.
List of available shapes.


Now we begin to make the code SVG. First, there is always this piece of code:

<desc>Created with Raphaël 2.0.1</desc><defs></defs><rect opacity="1" stroke-width="0" style="opacity: 1;" stroke="none" fill="#ececec" ry="0" rx="0" r="0" height="512" width="512" y="0" x="0"></rect>

Here you can set the transparency of the background (opacity="1" and opacity: 1; [values from 0 - completely transparent, to 1 - opaque]) and the color fill="#ececec" (#HEX_CODE_COLOR)

Next consistently go <path>. So far, so they are above the canvas.

Example:

<path transform="matrix(0.75,0,0,0.75,21.5,8.4981)" opacity="1" stroke-width="0" d="M300,149.988C300,232.83100000000002,232.83499999999998,299.985,149.997,299.985C67.154,299.985,0,232.831,0,149.988C0,67.15,67.154,0,149.997,0C232.835,0,300,67.15,300,149.988Z" stroke="none" fill="#fa1b05" style="opacity: 1;"></path>



Example svg

<desc>Created with Raphaël 2.0.1</desc><defs></defs><rect opacity="1" stroke-width="0" style="opacity: 1;" stroke="none" fill="#ececec" ry="0" rx="0" r="0" height="512" width="512" y="0" x="0"></rect><path transform="matrix(0.75,0,0,0.75,21.5,8.4981)" opacity="1" stroke-width="0" d="M300,149.988C300,232.83100000000002,232.83499999999998,299.985,149.997,299.985C67.154,299.985,0,232.831,0,149.988C0,67.15,67.154,0,149.997,0C232.835,0,300,67.15,300,149.988Z" stroke="none" fill="#fa1b05" style="opacity: 1;"></path><path transform="matrix(0.65,0,0,0.65,299.5,15.5)" opacity="1" stroke-width="0" d="M0,-0.007H300V299.99H1.547C1.547,299.99,1.438,299.898,1.3279999999999998,299.99C1.283,300.028,1.0939999999999999,299.99,1.0939999999999999,299.99H0L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99V-0.007Z" stroke="none" fill="#28da00" style="opacity: 1;"></path><path transform="matrix(1,0,0,1,107,170)" opacity="1" stroke-width="0" d="M148.842,0L84.523,129.637C84.523,129.637,84.53099999999999,129.782,84.426,129.83C84.382,129.851,84.339,130.006,84.339,130.006L0,300H299.706L148.842,0Z" stroke="none" fill="#2a52f8" style="opacity: 1;"></path>

Here - a red circle, green box and blue triangle
Function to save the resulting in socialclub

$("body").append('<div id="p" style="background:red;position: fixed;right:0;bottom:0;z-index:9999;padding:5px 10px;font-size:18px;margin:2px;">WAIT</div>');$("#emblemEditor-canvasContainer svg").html('<desc>Created with Raphaël 2.0.1</desc><defs></defs><rect opacity="1" stroke-width="0" style="opacity: 1;" stroke="none" fill="#ececec" ry="0" rx="0" r="0" height="512" width="512" y="0" x="0"></rect><path transform="matrix(0.75,0,0,0.75,21.5,8.4981)" opacity="1" stroke-width="0" d="M300,149.988C300,232.83100000000002,232.83499999999998,299.985,149.997,299.985C67.154,299.985,0,232.831,0,149.988C0,67.15,67.154,0,149.997,0C232.835,0,300,67.15,300,149.988Z" stroke="none" fill="#fa1b05" style="opacity: 1;"></path><path transform="matrix(0.65,0,0,0.65,299.5,15.5)" opacity="1" stroke-width="0" d="M0,-0.007H300V299.99H1.547C1.547,299.99,1.438,299.898,1.3279999999999998,299.99C1.283,300.028,1.0939999999999999,299.99,1.0939999999999999,299.99H0L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99V-0.007Z" stroke="none" fill="#28da00" style="opacity: 1;"></path><path transform="matrix(1,0,0,1,107,170)" opacity="1" stroke-width="0" d="M148.842,0L84.523,129.637C84.523,129.637,84.53099999999999,129.782,84.426,129.83C84.382,129.851,84.339,130.006,84.339,130.006L0,300H299.706L148.842,0Z" stroke="none" fill="#2a52f8" style="opacity: 1;"></path>');for(var a=[],i=0;3>i;i++)a[i]='{"id":"s'+((new Date).getTime()+Math.random()*Math.pow(10,18))+'","name":"01","type":"path","y":106,"x":106,"scaleY":100,"scaleX":100,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":'+i+',"color":"#000000","isFilled":true,"internal":false,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rounds/01","width":300,"height":299.99}';var g='[{"id":"background","name":"Background","type":"square","y":0,"x":0,"scaleY":100,"scaleX":100,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":0,"color":"#ececec","isFilled":true,"internal":true,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rectangles/square","width":512,"height":512},'+a+"]",m={};m.crewId=$("#editorField-crewId").val()||0,m.emblemId=$("#editorField-emblemId").val(),m.parentId=$("#editorField-parentId").val(),m.parentType=$("#editorField-parentType").val(),m.hash=$("#editorField-hash").val(),m.layerData=require("emblems/util/base64").encode(g),m.svgData=require("emblems/util/base64").encode(require("emblems/ui/tools").sanitizeSvg($("#emblemEditor-canvasContainer").html())),$.ajaxAntiForgery({url:"/emblems/save",type:"post",data:m,complete:function(e){var a=$.parseJSON(e.responseText);$("#p").html("DONE");setTimeout(function(){$("#p").fadeOut(3e3,function(){$(this).remove()})});alert(a.Status+" "+a.Message),200==a.Status&&($("#editorField-emblemId").val(a.EmblemId),$("#editorField-parentId").val(a.ParentId),$("#editorField-crewId").val(a.CrewId),$("#editorField-hash").val(a.Hash),m.emblemId=a.EmblemId,require("emblems/ui/list").addOrUpdateUserEmblem(m))}});

3 - count path

2) LAYERS

If you want to vary the emblem editor, you need to specify the complete code layers.
Layers code is in []
The first thing you need to describe the background.

{"id":"background","name":"Background","type":"square","y":0,"x":0,"scaleY":100,"scaleX":100,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":0,"color":"#ececec","isFilled":true,"internal":true,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rectangles/square","width":512,"height":512}

Further, the layers separated by commas. For example, a rectangle:

{"id":"s885707362953453600","name":"01","type":"path","y":-37,"x":247,"scaleY":65,"scaleX":65,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":1,"color":"#28da00","isFilled":true,"internal":false,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rectangles/01","width":300,"height":300.01}

Where "id":"s885707362953453600" - The unique identifier of the layer (not to be repeated), "index":1 - the layer number of the account? "slug":"rectangles/01" - type shape and others.

Example layers red circle, green box and blue triangle

[{"id":"background","name":"Background","type":"square","y":0,"x":0,"scaleY":100,"scaleX":100,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":0,"color":"#ececec","isFilled":true,"internal":true,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rectangles/square","width":512,"height":512},{"id":"s682560930213833100","name":"01","type":"path","y":-29,"x":-16,"scaleY":75,"scaleX":75,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":0,"color":"#fa1b05","isFilled":true,"internal":false,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rounds/01","width":300,"height":299.99},{"id":"s885707362953453600","name":"01","type":"path","y":-37,"x":247,"scaleY":65,"scaleX":65,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":1,"color":"#28da00","isFilled":true,"internal":false,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rectangles/01","width":300,"height":300.01},{"id":"s212388484163258660","name":"01","type":"path","y":170,"x":107,"scaleY":100,"scaleX":100,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":2,"color":"#2a52f8","isFilled":true,"internal":false,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"angles/01","width":299.71,"height":300}]

Function to save the resulting in socialclub whith layers

$("body").append('<div id="p" style="background:red;position: fixed;right:0;bottom:0;z-index:9999;padding:5px 10px;font-size:18px;margin:2px;">WAIT</div>');var layer='[{"id":"background","name":"Background","type":"square","y":0,"x":0,"scaleY":100,"scaleX":100,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":0,"color":"#ececec","isFilled":true,"internal":true,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rectangles/square","width":512,"height":512},{"id":"s682560930213833100","name":"01","type":"path","y":-29,"x":-16,"scaleY":75,"scaleX":75,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":0,"color":"#fa1b05","isFilled":true,"internal":false,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rounds/01","width":300,"height":299.99},{"id":"s885707362953453600","name":"01","type":"path","y":-37,"x":247,"scaleY":65,"scaleX":65,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":1,"color":"#28da00","isFilled":true,"internal":false,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"rectangles/01","width":300,"height":300.01},{"id":"s212388484163258660","name":"01","type":"path","y":170,"x":107,"scaleY":100,"scaleX":100,"invertedY":false,"invertedX":false,"rotation":0,"opacity":100,"index":2,"color":"#2a52f8","isFilled":true,"internal":false,"locked":false,"tBold":false,"tItalic":false,"fontFamily":null,"slug":"angles/01","width":299.71,"height":300}]';$("#emblemEditor-canvasContainer svg").html('<desc>Created with Raphaël 2.0.1</desc><defs></defs><rect opacity="1" stroke-width="0" style="opacity: 1;" stroke="none" fill="#ececec" ry="0" rx="0" r="0" height="512" width="512" y="0" x="0"></rect><path transform="matrix(0.75,0,0,0.75,21.5,8.4981)" opacity="1" stroke-width="0" d="M300,149.988C300,232.83100000000002,232.83499999999998,299.985,149.997,299.985C67.154,299.985,0,232.831,0,149.988C0,67.15,67.154,0,149.997,0C232.835,0,300,67.15,300,149.988Z" stroke="none" fill="#fa1b05" style="opacity: 1;"></path><path transform="matrix(0.65,0,0,0.65,299.5,15.5)" opacity="1" stroke-width="0" d="M0,-0.007H300V299.99H1.547C1.547,299.99,1.438,299.898,1.3279999999999998,299.99C1.283,300.028,1.0939999999999999,299.99,1.0939999999999999,299.99H0L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99L0,299.99V-0.007Z" stroke="none" fill="#28da00" style="opacity: 1;"></path><path transform="matrix(1,0,0,1,107,170)" opacity="1" stroke-width="0" d="M148.842,0L84.523,129.637C84.523,129.637,84.53099999999999,129.782,84.426,129.83C84.382,129.851,84.339,130.006,84.339,130.006L0,300H299.706L148.842,0Z" stroke="none" fill="#2a52f8" style="opacity: 1;"></path>');var m={};m.crewId=$("#editorField-crewId").val()||0,m.emblemId=$("#editorField-emblemId").val(),m.parentId=$("#editorField-parentId").val(),m.parentType=$("#editorField-parentType").val(),m.hash=$("#editorField-hash").val(),m.layerData=require("emblems/util/base64").encode(layer),m.svgData=require("emblems/util/base64").encode(require("emblems/ui/tools").sanitizeSvg($("#emblemEditor-canvasContainer").html())),$.ajaxAntiForgery({url:"/emblems/save",type:"post",data:m,complete:function(e){var a=$.parseJSON(e.responseText);$("#p").html("DONE");setTimeout(function(){$("#p").fadeOut(3e3,function(){$(this).remove()})});alert(a.Status+" "+a.Message+" Click the emblem below if you want to edit the elements"),200==a.Status&&($("#editorField-emblemId").val(a.EmblemId),$("#editorField-parentId").val(a.ParentId),$("#editorField-crewId").val(a.CrewId),$("#editorField-hash").val(a.Hash),m.emblemId=a.EmblemId,require("emblems/ui/list").addOrUpdateUserEmblem(m))}});


3) Layers or svg to site

Emblem Code to add to the site:

Only svg - svg code;
Svg and layers - layers|||svg