Usability of Vector

Graphics Editing Programs

A comparative study of

Adobe
Illustrator

svg-edit

By Ethan Hansen

April 19, 2015

Introduction
Manytechnicalwritersrelyonvisualsthatcomplementtextinordertofullyconveycomplex
ideas.BasicdrawingapplicationssuchasPaintareoftennotsufficientforcomplicated
illustrations,atechnicalwritermayconsiderusingavectorgraphicseditor.Whileabitmap
editorsuchasPhotoshopmaybeusefulforimageretouching,avectorgraphicseditortendsto
bebetterfortechnicalillustrations.Thevectorsuponwhichvectorgraphicsarebasedhave
definedpointsinaplane.Forthisreason,abitmapimagezoomedinwilleventuallygivewayto
pixels,whileavectorgraphicwillnot.Thiswhitepaperdescribestheresultsofausabilitystudy
testingtwovectorgraphicseditors:AdobeIllustratorandsvgedit.
AdobeIllustratoriscommonlyusedasapowerfulvectorgraphicseditingprogram,butitis
expensiveandcanbedifficulttomaster.Afreealternativeissvgedit,namedfortheusers
abilitytomanipulateScalableVectorGraphics(SVG)images.Theprogramrequiresnosoftware
installationbeyondausersexistingwebbrowser.
Whileaprofessionalillustratorwouldhavespecificneedsdictatingchoiceofsoftware,usability
inthiscontextreferstoalightuserwhoneedstodovectorgraphiceditingwork,butnotona
highlytechnicallevel.Theuserisassumedtohavebasicfamiliaritywithvectorgraphics,not
highlyspecializedworkingknowledge.

Methods
TheusabilitytestingwasperformedonanASUSK52FSerieslaptopusingtheWindows7
OperatingSystem.AdobeIllustratorCS6Version16(64bit)andsvgeditVersion2.5.1were
used.Thetestingenvironmentwasaquiet,roominanapartmentheldtobeatypicaluser
environmentoverthecourseofasingleafternooninApril2015.
Iperformedacognitivewalkthroughofthetypicallightusersexperience,selectingtentasks
typicaloflightusagetobeperformedinbothprograms.Thesetaskscomprisedthefollowing:
1.
2.
3.
4.
5.
6.
7.
8.
9.

Openlocalfiles
Freehanddrawing
Stylabletext
EyedropperTool
Lines
Polygons/CurvedPaths
ConvertShapestoPath
Layers
Rasterimages

Theexperienceandresultsofeachtaskwerecomparedinbothprograms.Comparisonwas
basedonevaluationaccordingtothefollowingthreecriteria:

Taskcompletionrequiredareasonableamountoftime.
Taskcompletionwasfacilitatedbyanintuitiveinterface.
Theresultoftaskcompletionfulfilledexpectations.

TheproductswereassessedaccordingtothesecriteriaonafivepointLikertScalequantifying
thedegreetowhichtheuseragreedwitheachstatementabouttimeliness,intuitiveness,and
overallsatisfactionwiththeresult:
Taskcompletionrequiredareasonableamountoftime.
StronglyAgree

Agree

Neutral

Disagree

Strongly
disagree
1

Taskcompletionwasfacilitatedbyanintuitiveinterface.
StronglyAgree

Agree

Neutral

Disagree

Strongly
disagree
1

Theresultoftaskcompletionfulfilledexpectations.
StronglyAgree

Agree

Neutral

Disagree

Strongly
disagree
1

Results
Task1:Openlocalfiles
Thefirsttaskformanyuserswouldbetoopenanexisting
image.Sincesvgeditwasoriginallyintendedprimarilyasa
waytomakechangestoexistingimages,thistaskseems
particularlyimportanttobothprogramsfunctionality.
ForAI,thistaskwasassimpleasclickingFile>Open.Iwas
thenabletoaccessandeditthefile.Forsvgedit,thistaskis
similarlysimple,butitmaytakesometimetobecome
accustomedtothedifferentmenubarsetups,sincethe
programisusedwithinabrowser,notaseparateprogram.
RatherthantheFiletabaWindowsusermaybeusedto

Figure1:Thesvgeditdropdown
menuisaccessedviathepencillogo.

seeing,theuserneedstopressonthesvgeditpencillogo(figure1)toaccessthepulldown
menu.
Inaddition,AdobeIllustratorcanbeusedtoopenawiderangeoffilesincludingfiletypesthat
arespecifictoAIthathavebecomestandard.Imagestobeeditedinsvgeditwillneedtohave
beensavedin.svgformatwhichmayseemobvious,butcouldpresentaproblemifauser
habituallysavesin.ai(AdobeIllustrator)formatandthenattemptstoeditthefilelaterwithout
havingaccesstoAI(acommonuseofsvgedit).
Taskcompletion
Taskcompletionwas Theresultoftask
Likert
completionfulfilled
Scale requiredareasonable facilitatedbyan
amountoftime.
intuitiveinterface.
expectations.
Scores
AI
5
5
5
svgedit
4
4
5

Figure2:Task1Likert
ScaleScores

Task2:Freehanddrawing
Acommonuseforbothprogramsisfreehanddrawing.UsingthePencilToolforthistaskin
bothapps,andforgoinguseofagraphicstablettomorecloselymimicthelightuser
experience,IfoundthatthefreehanddrawinginIllustratorresultedinclearer,cleanerlines(as
canbeseeninfigure3),lendingitselftomoredetailandamorepleasingfinishedproduct.On
theotherhand,thePencilToolinIllustratoristechnicallyusedtomodifyPaths,meaningthat
additionaldrawinginthevicinityofanexistingPathwillregisterasamodificationtothe
existingPath,notasanewdrawing.Insvgedit,thePencilToolhasasimilaruse,butnew
drawingsdonotchangetheexistingPath,leadingtoamorenaturaldrawingexperience.

Figure2:FreehanddrawingwithIllustrator(left)
andsvgedit(right).

Likert
Taskcompletion
Taskcompletionwas Theresultoftask Figure3:Task2Likert
ScaleScores
Scale requiredareasonable facilitatedbyan
completionfulfilled
Scores
amountoftime.
intuitiveinterface.
expectations.
AI
5
3
5
svgedit
5
5
4

Task3:Stylabletext
Theadditionofstylabletextisusefulinthecreationoftechnicaldiagramswhenadditional
annotationisneeded.UsingtheTypeToolinIllustratorallowsonetocreateatextbox,type,

andmanipulatethetextwithcolor,font,size,bolding,etc.Insvgedit,theTextToolsimply
createsacursorwithnowaytoconfinethetextinabox;furthermore,anyformattingchanges
modifiedalltext,notjustselectedtextasispossibleinIllustrator(asfigure4illustrates).In
bothcases,thetextformattinglayoutdifferssignificantlyfromwhatauseraccustomedto
editingtextinawordprocessormightexpect.

Figure4:StylabletextinIllustrator(left)
andsvgedit(right).

Figure5:Task3Likert
Likert
Taskcompletion
Taskcompletionwas Theresultoftask
ScaleScores
Scale requiredareasonable facilitatedbyan
completionfulfilled
Scores
amountoftime.
intuitiveinterface.
expectations.
AI
5
4
5
svgedit
5
4
4

Task4:EyedropperTool
TheEyedropperToolinsvgeditisafairlycrudetool,andusersaccustomedtoworkingwith
bitmapeditorsmayfinditfrustratingtouse.Becausevectorgraphicsarevectorbased,not
pixelbased,oneisnotabletosimplyselectapointandusethecolorassociatedwiththatpixel,
asonewoulddoinPhotoshop.Instead,oneselectsanobject,andtheEyedroppertakesonthe
coloroftheobjectsfill.WhilethesameparametersapplyinIllustrator(beingbasedonvectors
insteadofgraphics),theprogramisaneasiertransitionthansvgeditforsomeonenewto
vectorgraphics.InIllustrator,onecanimportaphoto(notasupportedfeatureinsvgedit)and
selectacolorfromtheimage,muchasonewoulddoinPhotoshop.
Likert
Taskcompletion
Taskcompletionwas Theresultoftask Figure6:Task4Likert
ScaleScores
Scale requiredareasonable facilitatedbyan
completionfulfilled
Scores
amountoftime.
intuitiveinterface.
expectations.
AI
5
5
5
svgedit
4
3
4

Task5:Lines
InIllustrator,creatinglinesconsistsofselectingtheLineSegmentTool,choosingapoint,and
extendingtheline.ThebasicprocessisthesamewiththeLineToolinsvgedit.However,
Illustratordoesprovideamoreuserfriendlyexperience,asconnectionsbetweenlines,
midpoints,etc.,areshowningreen(asshowninfigure8)tofacilitatesymmetryand

connectionsbetweenPaths.Theseguidelinesarenotpresentinsvgedit,anditisimpossible
tochangethethicknessorcolorofthelineinsvgedit,asupportedIllustratorfeature.

Figure8:LinesbeingdrawninIllustrator(left)andsvgedit(right).

Likert
Taskcompletion
Taskcompletionwas Theresultoftask
Figure7:Task5Likert
Scale requiredareasonable facilitatedbyan
completionfulfilled ScaleScores
Scores
amountoftime.
intuitiveinterface.
expectations.
AI
5
5
5
svgedit
5
4
3

Task6:Polygons/CurvedPaths
TocreateaCurvedPathinIllustrator,theusersimplyusesthePenTooltoinsertpointsona
Path,whichcanthenbeheldorclicked,thendraggedadistancethatisproportionaltothe
curvethatwillbecreatedinthePath.Insvgedit,aPathToolisusedtocreatePaths,andthena
dropdownoptioninthePathTooloptions

Figure9:ThePenToolisusedtocreateaCurvedPathin
Illustrator(left),whileinsvgedit(below),pathsare
madeStraightorCurvedviaselectionfromadropdown
menu.

Figure10:Task6Likert
Likert
Taskcompletion
Taskcompletionwas Theresultoftask
ScaleScores
Scale requiredareasonable facilitatedbyan
completionfulfilled
Scores
amountoftime.
intuitiveinterface.
expectations.
AI
4
4
5
svgedit
4
3
4

Task7:ConvertShapestoPath
InIllustrator,discreteShapescanbeconvertedtoaPathbymultiplyselectingShapes(clicking
whileholdingCtrlorclickinganddraggingoveragivenarea),thenrightclickingandselecting
MakeCompoundPath.TheShapehasnowbeenconvertedtoaPatharoundwhichother
featurescanbeoriented.Ontheotherhand,svgeditonceagainreliesonthetoolbar,asone
mustselectobjectsandthenfindtheConverttoPathicon(figure11).

Figure12:TheCompoundPathinIllustrator(left)astheendresultofthe
conversion,andtheConvertShapestoPathToolshownasfarrighticonon
thetoolbarinsvgedit(below).

Likert
Taskcompletion
Taskcompletionwas Theresultoftask
Scale requiredareasonable facilitatedbyan
completionfulfilled
Scores
amountoftime.
intuitiveinterface.
expectations.
AI
4
4
5
svgedit
4
3
5

Figure11:Task7Likert
ScaleScores

Task8:Layers
Theabilitytocreateandworkwithinmultiplelayersisakeyfeatureofavectorgraphicseditor.
Afirststepistocreateanewlayer.ThisisaccomplishedinIllustratorbyselectingtheLayers
menufromtherighthandtoolbar,thenselectingtheCreateNewLayericon;thelayer
immediatelyappearsinthemenu.Theusercanthentogglebetweenlayers,hidingorshowing
anygivenlayerbyselectingtheeyeicon(figure13).Additionally,alayercanbedeleted,
renamed,orreorderedfromthismenu,optionsalsopresentintheLayersmenuofsvgedit.

Figure13:TheLayersmenu
inIllustrator(aboveleft)
contrastedwiththeLayers
menuinsvgedit(above).
Layervisibilitycanbe
toggledasseeninIllustrator,
atleft.

TheLayersMenuactionsinbothprogramsarevery
similar.Oneofthefewdifferencesisthatsvgedithasa
Moveelementstopicklistwiththedifferentlayersas
selectableoptions.Theuserhighlightsagroupof
elementsandusesthispicklisttomovethemtoanew Figure15:Movingelementsbetweenlayersin
Illustratorinvolvesclickinganddraggingthe
layer.InIllustrator,thissametaskisaccomplishedby
coloreddots.
selectinganelement,atwhichpointadotappearsin
theLayersmenuintherowforthecorrespondinglayer.Theuserclicksonthedotanddragsit
toanotherlayerinordertomovetheelement(figure14).WhiletheIllustratormethodis
intuitive,thesvgeditpicklistmakestheactionexplicitfornoviceusers.
Figure14:Task8Likert
Likert
Taskcompletion
Taskcompletionwas Theresultoftask
ScaleScores
Scale requiredareasonable facilitatedbyan
completionfulfilled
Scores
amountoftime.
intuitiveinterface.
expectations.

AI
5
4
5

svgedit
5
5
5

Task9:Rasterimages
Whencreatingadiagramorillustration,itissometimesnecessarytotraceoverarasterimage
(suchasaJPEGimage)inavectorgraphicseditor,effectivelyconvertingarasterimage(pixel
based)toavectorgraphic.Inordertotraceoverarasterimagewithoutsavingittothefinal
product,auserwilltypicallyloadtherasterimageasabackgroundorasalayerthatwilllater
bedeleted.BothIllustratorandsvgedithavemeansofaccomplishingthis.
InIllustrator,theusercansimplypasteanimageintoalayerandtraceinanewlayerontopof
it.Insvgedit,tracingismuchthesame,buttheimagemustbeuploadedusingtheImageTool
(figure16).Atthispoint,thetracingwillbesimilardependingonthetoolused;again,though,
thePencilToolinsvgeditprovidesamorenaturaldrawingexperience,whiletheanchor
pointsonthePathinIllustratormakeforeasieradjustment.

Figure16:TracingvialayersinIllustrator(above)andwiththeImageToolinsvgedit(below).

Likert
Taskcompletion
Taskcompletionwas Theresultoftask
Scale requiredareasonable facilitatedbyan
completionfulfilled
Scores
amountoftime.
intuitiveinterface.
expectations.
AI
5
4
5
svgedit
4
5
4

Figure17:Task9Likert
ScaleScores

ResultsSummary
AdobeIllustrator(AI)performedbetterthansvgedit(se)foreachcriteria.Illustratorhadthe
largestpointadvantageoversvgeditonoverallsatisfactionwiththeresult(asevenpoint
difference),whiletheclosestscoreswereforintuitiveness(withonlytwopointsdifference).
Overall,Illustratorscored126pointscomparedto114forsvgedit,outofatotalpossible139.
Thisrepresentsa91%scoreforIllustratorand82%forsvgedit.

OverallScores
Task

Cr1AI

Cr1se

Cr2AI

Cr2se

Cr3AI

Cr3se

1
2
3
4
5
6
7
8
9

5
5
5
5
5
4
4
5
5

4
5
5
4
5
4
4
5
4

5
3
4
5
5
4
4
4
4

4
5
4
3
4
3
3
5
5

5
5
5
5
5
5
5
5
5

5
4
4
4
3
4
5
5
4

TotalScore
se
13
14
13
11
12 114
11
12
15
13

Total
ScoreAI
15
13
14
15
15 126
13
13
14
14

CUMULATIVESCORES

RESULTSBYCRITERION

50
40
30
se

20
10

AI

0
Timeliness

Intuitiveness
CRITERA

OverallSatisfaction

Recommendations
Insummary,bothAdobeIllustratorandsvgeditprovidestrongvectorgraphicsediting
capabilities.Tobesure,AdobeIllustratoristhebetterchoiceforanexperiencedortechnical
user.Foralight,inexperienceduser,svgeditmaybeahelpfulstartingpoint.Thehighcostof
AdobeIllustratorprobablywillnotbeorfeelworthittotheuserwithoutfirstusingsvgedit(or
asimilarprogram)andlearningenoughtoencounteritslimitations.
Interestingly,bothprogramsareprobablybestsuitedforamoreexperienceduser.Adobe
Illustratorisinfamousforbeingdifficulttomaster,andsvgeditisnotsoaccessibleastobean
idealtrainingprogram(althoughthereareotherprogramsthatmightbe).Instead,svgeditis
probablymostusefulasacomplementtoAdobeIllustratorfortheexperienceduserneedingto
makequickeditsawayfromtheoffice,onacomputerwithoutIllustratorsoftwareloaded.
Overall,IrecommendalightuserstartwithsvgeditandthenmoveontoAdobeIllustrator
whentheuserisreadytomovebeyondthelimitationsoftheinbrowserprogram.